Lottie初探(二)

2019-11-09 16:56:34

字体：大中小

来源：转载

供稿：网友

昨天，对Lottie有了一个基本的认知，了解是如何使用Lottie在自己的项目中添加动画。今天，我们来对Lottie进一步探究，了解它的动画监听器，以及自定义Lottie动画的时间。官方给我们的提供控制动画与监听的常用方法有：这里写图片描述我们也是基于以上方法做出的案例：这是我们demo界面我们先从最简单的开始，暂停动画说起，先上代码

play.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //开始动画 lottieAnimationView.playAnimation(); } }); pause.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //暂停动画 lottieAnimationView.pauseAnimation(); //将动画初始至开头 } }); cancel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //使用cancelAnimation方法，使动画暂停，再点击播放，会从暂停的位置继续播放 lottieAnimationView.cancelAnimation(); } });playAnimation(); //控制播放动画cancelAnimation(); //停止动画，再次播放时会从停止的地方播放pauseAnimation(); //停止动画，再次播放会从头播放

接下来，未动画添加监听器

lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationStart",Toast.LENGTH_SHORT).show(); } @Override public void onAnimationEnd(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationEnd，动画总时长为" + lottieAnimationView.getDuration() + "ms",Toast.LENGTH_SHORT).show(); } /**此方法未进行回调，playAnimator,cancelAnimator,pauseAnimator,回调的都是onAnimationEnd方法*/ @Override public void onAnimationCancel(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationCancel",Toast.LENGTH_SHORT).show(); } /**当loop=true的时候才会回调此方法*/ @Override public void onAnimationRepeat(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationRepeat",Toast.LENGTH_SHORT).show(); } });

其中onAnimationStart()与onAnimationEnd()回调函数是在动画开始与结束的时候调用。 onAnimationCancel() 未进行回调，playAnimator()，cancelAnimator()，pauseAnimator()回调的都是onAnimationEnd()方法,有知道这个方法如何回调的大神们还请告知 onAnimationRepeat() 方法在动画重复播放的时候调用，此时loop = true才可以其中getDuration() 方法获取的是动画从开始到结束的总时长，毫秒为单位 setPRogress() 是设置动画的开始位置，范围0-1，类型float

自定义Lottie动画

使用ValueAnimator或ObjectAnimator 来自定义Lottie的时长，透明度等等

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 1f, 0f) .setDuration(60000); valueAnimator.setRepeatCount(3); //重复循环3次 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { lottieAnimationView.setProgress((float)animation.getAnimatedValue()); } }); valueAnimator.start();

这段代码自定义动画的时长是60秒，即60秒执行完整个动画效果ValueAnimator.ofFloat(0f, 1f, 0f) 控制动画完成又倒着执行: 这里写图片描述是不是也不难？接下来，我们使用动画的组合，将Alpha与Value结合使用，效果图：代码上来：

/**动画的组合使用*/ ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 1f, 0f); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { lottieAnimationView.setProgress((float)animation.getAnimatedValue()); } }); ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(lottieAnimationView,"alpha",0.0f,1.0f,0.0f); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.playTogether(valueAnimator,alphaAnimator); animatorSet.setDuration(10000); animatorSet.start();

Lottie确实让我们开发Android动画变得很灵活，如果不是局限于.json文件，这将是一个很好的动画方案。这些就是今天学习的，很简单是吧。另附上demo地址：demo