[英]How to implement circular to check / tick animation in Android?
I am trying to animate a custom view我正在尝试为自定义视图设置动画
I implemented a circular progress bar custom view, exactly similar to this one我实现了一个圆形进度条自定义视图,与这个完全相似
@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
if (totalCount == 0 || progressCount == 0)
{
// No progress, set a different background color and draw a arc and set a icon at the center
progressBackgroundPaint.setColor(outerNoProgressBackgroundColor);
canvas.drawArc(viewRect, PROGRESS_START_DEGREE, PROGRESS_END_DEGREE, false, progressBackgroundPaint);
drawInnerBackgroundWithState(canvas, ProgressState.NO_PROGRESS);
drawCenterIconWithState(centerIconEmptyBitmap, canvas, ProgressState.NO_PROGRESS);
}
else
{
// Change the color first for a progress bar
progressBackgroundPaint.setColor(outerProgressBackgroundColor);
canvas.drawArc(viewRect, PROGRESS_START_DEGREE, PROGRESS_END_DEGREE, false, progressBackgroundPaint);
// Then draw an arc on top of it marking progress
canvas.drawArc(viewRect, PROGRESS_START_DEGREE, getAngle(), false, progressPaint);
// set inner background color and tint center icon with state-appropriate color and draw it in the center
// of the progress circle
if (progressCount < totalCount)
{
canvas.drawOval(viewRect, innerBackgroundPaint);
drawCenterIconWithState(centerIconProgressBitmap, canvas, ProgressState.IN_PROGRESS); // draw bit map function
}
else
{
canvas.drawOval(viewRect, completeBackgroundPaint);
drawCenterIconWithState(centerIconProgressBitmap, canvas, ProgressState.COMPLETE); // draw bitmap function
}
}
}
I call this onDraw
using ValueAnimator
我使用ValueAnimator
称为onDraw
public void drawProgressAnimation(float progress)
{
ValueAnimator animator;
if (animator != null)
animator.cancel();
animator = ValueAnimator.ofFloat(0f, progress);
animator.setDuration(600);
progressAnimator.addUpdateListener(animation ->
{
float progress1 = (float)animation.getAnimatedValue();
setProgress(progress1, true);
});
progressAnimator.start();
}
And invalidating in setProgress
method which calls onDraw
.并在调用onDraw
setProgress
方法中失效。
But, I need to achieve something like this ,但是,我需要实现这样的目标,
I tried using Animator set along with ValueAnimator
, but it didn't work.我尝试将 Animator 与ValueAnimator
一起使用,但没有用。 I tried to call onDraw
with sequentially by setting a variable inside the lambda but in vain.我试图通过在 lambda 内部设置一个变量来按顺序调用onDraw
但徒劳无功。 I am not sure whether can do this using AnimatedVectorDrawable
.我不确定是否可以使用AnimatedVectorDrawable
做到这一点。 Can somebody help?有人可以帮忙吗?
Have you tried seeing the source code for this:您是否尝试过查看此源代码:
https://github.com/cdflynn/checkview https://github.com/cdflynn/checkview
Also refer this library: https://github.com/airbnb/lottie-android that can help you use the animation.另请参阅此库: https : //github.com/airbnb/lottie-android可以帮助您使用动画。
我认为此视图可以由 AnimatedStateListDrawable 完成,这是此类动画的最佳实践,您可以在保留部分查看https://medium.com/androiddevelopers/animating-on-a-schedule-8a90d812ae4 。
You can make use of this Lottie File您可以使用此Lottie 文件
Then setup Lottie using this然后使用这个设置 Lottie
Here is a tutorial for implementing Lottie in android projects. 这是一个在android项目中实现Lottie的教程。
Using Lottie can save plenty of struggling hours in Android animation and it is easy to implement also.使用 Lottie 可以在 Android 动画中节省大量艰苦的时间,而且它也很容易实现。 Lottie won't consume huge memory which is really helpful for us. Lottie 不会消耗大量内存,这对我们很有帮助。
I used this repo as reference and implemented what i want.我使用这个 repo 作为参考并实现了我想要的。 Instead of using random counter to set the speed.而不是使用随机计数器来设置速度。 I used value animation and used the progress value for every frame to set the arc rate.我使用值动画并使用每一帧的进度值来设置弧率。 And used the counter to draw circles that would grow from Zero to radius.并使用计数器绘制从零增长到半径的圆。
{
canvas.drawArc(mRect, START_DEGREE, getSweepAngle(), false, progressPaint);
// animate circle progress when arc reaches partial sweep angle
if (getSweepAngle() >= partialSweepAngle)
{
innerBackground.setColor(innerCompleteColor);
circleCounter += circleProgressRate;
if (circleCounter <= radius)
canvas.drawCircle(mRect.centerX(), mRect.centerY(), circleCounter,
innerBackground);
else
canvas.drawCircle(mRect.centerX(), mRect.centerY(), radius, innerBackground);
}
if (circleCounter >= radius)
// draw the icon
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.