Lottie初探(二)

2019-11-09 15:43:30

字體：大中小

供稿：網(wǎng)友

昨天，對Lottie有了一個(gè)基本的認(rèn)知，了解是如何使用Lottie在自己的項(xiàng)目中添加動(dòng)畫。今天，我們來對Lottie進(jìn)一步探究，了解它的動(dòng)畫監(jiān)聽器，以及自定義Lottie動(dòng)畫的時(shí)間。官方給我們的提供控制動(dòng)畫與監(jiān)聽的常用方法有：這里寫圖片描述我們也是基于以上方法做出的案例：這是我們demo界面我們先從最簡單的開始，暫停動(dòng)畫說起，先上代碼

play.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //開始動(dòng)畫 lottieAnimationView.playAnimation(); } }); pause.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //暫停動(dòng)畫 lottieAnimationView.pauseAnimation(); //將動(dòng)畫初始至開頭 } }); cancel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //使用cancelAnimation方法，使動(dòng)畫暫停，再點(diǎn)擊播放，會(huì)從暫停的位置繼續(xù)播放 lottieAnimationView.cancelAnimation(); } });playAnimation(); //控制播放動(dòng)畫cancelAnimation(); //停止動(dòng)畫，再次播放時(shí)會(huì)從停止的地方播放pauseAnimation(); //停止動(dòng)畫，再次播放會(huì)從頭播放

接下來，未動(dòng)畫添加監(jiān)聽器

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，動(dòng)畫總時(shí)長為" + lottieAnimationView.getDuration() + "ms",Toast.LENGTH_SHORT).show(); } /**此方法未進(jìn)行回調(diào)，playAnimator,cancelAnimator,pauseAnimator,回調(diào)的都是onAnimationEnd方法*/ @Override public void onAnimationCancel(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationCancel",Toast.LENGTH_SHORT).show(); } /**當(dāng)loop=true的時(shí)候才會(huì)回調(diào)此方法*/ @Override public void onAnimationRepeat(Animator animation) { Toast.makeText(LottieActivity.this,"onAnimationRepeat",Toast.LENGTH_SHORT).show(); } });

其中onAnimationStart()與onAnimationEnd()回調(diào)函數(shù)是在動(dòng)畫開始與結(jié)束的時(shí)候調(diào)用。 onAnimationCancel() 未進(jìn)行回調(diào)，playAnimator()，cancelAnimator()，pauseAnimator()回調(diào)的都是onAnimationEnd()方法,有知道這個(gè)方法如何回調(diào)的大神們還請告知 onAnimationRepeat() 方法在動(dòng)畫重復(fù)播放的時(shí)候調(diào)用，此時(shí)loop = true才可以其中getDuration() 方法獲取的是動(dòng)畫從開始到結(jié)束的總時(shí)長，毫秒為單位 setPRogress() 是設(shè)置動(dòng)畫的開始位置，范圍0-1，類型float

自定義Lottie動(dòng)畫

使用ValueAnimator或ObjectAnimator 來自定義Lottie的時(shí)長，透明度等等

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

這段代碼自定義動(dòng)畫的時(shí)長是60秒，即60秒執(zhí)行完整個(gè)動(dòng)畫效果ValueAnimator.ofFloat(0f, 1f, 0f) 控制動(dòng)畫完成又倒著執(zhí)行: 這里寫圖片描述是不是也不難？接下來，我們使用動(dòng)畫的組合，將Alpha與Value結(jié)合使用，效果圖：代碼上來：

/**動(dòng)畫的組合使用*/ 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確實(shí)讓我們開發(fā)Android動(dòng)畫變得很靈活，如果不是局限于.json文件，這將是一個(gè)很好的動(dòng)畫方案。這些就是今天學(xué)習(xí)的，很簡單是吧。另附上demo地址：demo