How can I create an animation similar to the stock android launcher animation applied to apps when you change homescreen pages.
Here's a gif: https://i.stack.imgur.com/Zh7qE.gif
As the page swipes, the icons slightly overshoot their mark, and settle back to the center. I don't see how I can do that with a PageTransformer and I can't find any resources to point me in the right direction.
I once created a one-time bounce animation:
val pixels = binding.pager.width / 8
ValueAnimator.ofInt(0, pixels).apply {
duration = 200L
interpolator = DecelerateInterpolator()
repeatCount = 3
repeatMode = ValueAnimator.REVERSE
addUpdateListener {
binding.pager.scrollX = it.animatedValue as Int
}
}.start()
Use ofInt(0, pixels) for bouncing left or ofInt(0, -pixels) to bouncing right.
In my code I used a dragging distance of 1/8 of the view pager.
Feel free to choose how much you want to bounce:
val pixels = PIXELS_TO_DRAG
Finally, the repeatCount determines how many bounces - use 3 for 2 bounces, 5 for 3 bounces, 7 for 4 bounces etc.
You can fire this animation each time a pager transition end and tweak the parameters to get the desired behavior.
Enjoy,
Hope it helps :)
According to #Shlomi, you can do this implementation:
var currentPage = 0
binding.viewPager.onPageChangeListener {
val pixels = binding.vpBennefits.width / 8
ValueAnimator.ofInt(
0, if (currentPage < it)
pixels
else
-pixels
).apply {
duration = 200L
interpolator = DecelerateInterpolator()
repeatCount = 1
repeatMode = ValueAnimator.REVERSE
addUpdateListener {
binding.vpBennefits.scrollX = it.animatedValue as Int
}
}.start()
currentPage = it
}
By this way you can obtain the desired effect in both sides
Related
I am trying to implement similar animation like this, with Jetpack Compose
figure: https://dribbble.com/shots/4762799-Microinteraction-Exploration-002
For the play icon’s transformation (from a triangle to a rectangle) , it not difficult to get it done by using path morphing animation.After reading some gist, I found that I can build an ImageVector by supplying the pathData , that's new to me~
While for ****the part on the right, the rotation of the cube object. Well, maybe I should call that a rolling-over or whatever, because the cube changed its pivot after -90 degrees.
I'm wondering that wether I can create a VectorGroup for the cube’s pathData and animate it by updating its group parameters.
re: androidx.compose.ui.graphics.vector.ImageVector.Builder#addGroup
ImageVector.Builder(defaultWidth = 100.dp, defaultHeight = 100.dp, viewportWidth = 100, viewportHeight = 100)
.addGroup(name = "CubeRotation", rotate = params.rotate, pivotX = params.pivotX, pivotY = params.pivotY,)
.addPath(pathData = pathData, fill = SolidColor(Color.LightGray))
.clearGroup()
.build()
Here I trying to update the pivotX halfway through the animation, so I divide it into two section:
// rotate -90 degrees twice with different pivot
val rotate = if (fraction <= 0.5f) {
lerp(0f, -180f, fraction)
} else {
lerp(0f, -180f, fraction - 0.5f)
}
// change the pivotX
val pivotX = if (fraction <= 0.5f) 52f else 30f
GroupParams(
pivotX = pivotX,
pivotY = 100f,
rotate = rotate,
)
Frustratedly, after rotating by the first -90 degrees, the transformation that this rotation performed will NOT persist, -or- its transformation NOT being applied after the half time of the transition.
fraction: 0~0.5
fraction: 0.5~1
The code sample I've uploaded: IndicatorDrawable.kt
Can I implement the rotate transformation by just updating the pathData ?
For me, the VectorGroup in ImageVector looks like creating AnimatedVectorDrawable in xml, or maybe I should try some traditional way like ObjectAnimationSet in View system ?
I am trying to implement a scrolling image that is much wider then device's screen. See example:
Right now I implemented it using Row with horizontalScroll modifier, and calling scrollState.animateScrollTo
I do not like this implementation since I need this animation to go back and forth if the image reaches it's end, and scrolling it using animateScrollTo results in ugly code (need to call it in a loop to reverse when it's do) and it's not completely smooth for some reason.
while (true) {
animationPositions.forEach {
if ((scrollState.maxValue * it).toInt() != scrollState.value) {
scrollState.animateScrollTo(
(scrollState.maxValue * it).toInt(),
animationSpec = tween(
cycleDurationMillis / animationPositions.size,
easing = LinearEasing
)
)
}
}
}
Is there a way to do this in cleaner way? I was thinking about simple offset/translationX usage, but the image is clipped on the sides because of parent container (e.g. if I just put in a column and try to move it with offset).
Is there a way to not clip the image if it's too large to fit?
Thanks
// Min and Max possible states
val minima = ...
val maxima = ...
val value by rememberInfiniteTransition().animateInt(
initialValue = minima,
targetValue = maxima,
animationSpec = infiniteRepeatable(
animation = tween(
cycleDurationMillis / animationPositions.size,
easing = LinearEasing
)
),
repeatMode = RepeatMode.Restart
)
scrollState.scrollTo(value) // Do not use animateScrollState here, that's already taken care of
A think a do not understand enough matrices theory to build animation for matrix inside image view.
For example i have some value that i want to set in postScale method to my matrix.
I use this code
fun animateScale(scale_factor:Float,matrix: Matrix)
{
matrix.postScale(scale_factor,scale_factor)
image_view.imageMatrix = matrix
}
This code makes scale to image view as it is expected. But i cant calculate postScale with animation. I tried different approaches using ValueAnimator.ofFloat(0f, 1f) or ValueAnimator.ifInt(1, 100) but result is weird.
Updated
I added my tries of animating as it asked in comments.
val animator = ValueAnimator.ofFloat(0f, 1f)
animator.addUpdateListener(
{ animation ->
val current_anim_value = animation.animatedValue as Float
val factor_to_anim = scale_factor - ( scale_factor * current_anim_value)
matrix.postScale(factor_to_anim, factor_to_anim)
image_view.imageMatrix = matrix
})
animator.duration = 3000
animator.start()
I am wanting to hide an extended fab when it is clicked using an Animation. I want to scale the button down from original height and width to 0/gone. It disappears in the corner but the animation is laggy in the middle.
private fun animateHideScoreFab(){
val animX = ValueAnimator.ofInt(editScoreFab.measuredWidth, 0).apply {
duration = 1000
}
val animY = ValueAnimator.ofInt(editScoreFab.measuredHeight, 0).apply {
duration = 1000
}
animX.addUpdateListener {
val value = it.animatedValue as Int
editScoreFab.layoutParams.width = value
editScoreFab.requestLayout()
}
animY.addUpdateListener {
val value = it.animatedValue as Int
editScoreFab.layoutParams.height = value
}
AnimatorSet().apply {
this.interpolator = AccelerateDecelerateInterpolator()
play(animX).with(animY)
start()
}
}
Result:
Using AccelerateDecelerateInterpolator https://developer.android.com/reference/android/view/animation/AccelerateDecelerateInterpolator says
An interpolator where the rate of change starts and ends slowly but accelerates through the middle.
So in the middle the rate of change is faster than the start which could make it look laggy
Try another Interpolator like LinearInterpolator https://developer.android.com/reference/android/view/animation/LinearInterpolator.html which has a constant rate of change.
Update
For AccelerateDecelerateInterpolator if you look at the table in https://developer.android.com/guide/topics/graphics/prop-animation.html#interpolators between 400ms and 600ms the the value jumps 45.5% of the distance you and animating
The other factor of smoothness is not to use an Int but use a Float e.g. ValueAnimator.ofFloat so it has intermediate steps,
Update2
Re-laying out an item is expensive as it has to be measured and redrawn.
It should be faster and smoother just to scale the already drawn image as this is usually done by the GPU and thus faster and smoother. Also scaling a view takes a Float
example of scaling a Fab to top right onClick (Note using ObjectAnimator as it is simpler to implement)
Sorry in Java not Kotlin
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
AnimatorSet animationSet = new AnimatorSet();
// Set point to scale around to top right
view.setPivotY(0);
view.setPivotX(view.getMeasuredWidth());
ObjectAnimator scaleY = ObjectAnimator.ofFloat(view,"scaleY", 1f, 0f);
scaleY.setDuration(1000);
// Optional as AccelerateDecelerateInterpolator is the default
scaleY.setInterpolator(new AccelerateDecelerateInterpolator());
ObjectAnimator scaleX = ObjectAnimator.ofFloat(view,"scaleX", 1f, 0f);
scaleX.setDuration(1000);
// Optional as AccelerateDecelerateInterpolator is the default
scaleX.setInterpolator(new AccelerateDecelerateInterpolator());
animationSet.playTogether(scaleX, scaleY);
animationSet.start();
}
});
There's a scaleX and scaleY property in Views that you can interpolate from 1 to 0, this will give the effect of the View shrinking and not the container.
Second, for a scale animation work to the top if your parent layout params doesn't do for you, you have to set the pivot to the rightXtop corner with: view.pivotX = view.width; view.pivotY = 0
Also, if you using propertyListener and updating it yourself you can use only one ValueAnimator and do the calc yourself plus consider replacing editScoreFab.requestLayout() with editScoreFab.invalidate()
Basically I want something to fade-in and then fade-out. Initially it should be invisible, and when the animation is ended, it should also be invisible.
targetView.alpha = 0f;
var aa = AlphaAnimation(0f, 1.0f);
aa.duration=2000;
aa.repeatMode = Animation.REVERSE;
aa.repeatCount = 1;
I have tried the code above, but it did not work. it seems that the alpha animation is multiplying the initial alpha with that animation. So, 0f * 1.0f = 0f = invisible.
After searching for an answer, I have tried this, but it did not work.
aa.fillBefore= true;
aa.fillAfter=true;
How can I make the animation ignore the initial alpha value? Is it impossible, and I should change the visibility at the start/end of the animation manually?
Yes you are right about "it seems that the alpha animation is multiplying the initial alpha with that animation. So, 0f * 1.0f = 0f = invisible.".
Just don't use targetView.alpha = 0f;, use targetView.setVisibility(View.INVISIBLE); instead.