Lottie初探(二)

2019-11-09 15:43:30

字體：大中小

來源：轉載

供稿：網友

昨天，對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