使用動(dòng)畫(huà)實(shí)現(xiàn)微信讀書(shū)的換一批效果(兩種方式)

更新時(shí)間：2020年05月11日 14:23:56 作者：henkun

這篇文章主要介紹了使用動(dòng)畫(huà)實(shí)現(xiàn)微信讀書(shū)的換一批效果,本文通過(guò)實(shí)例代碼通過(guò)兩種方式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

先來(lái)看看微信讀書(shū)的效果

在這里插入圖片描述

實(shí)現(xiàn)思路

這個(gè)效果比較簡(jiǎn)單，主要是旋轉(zhuǎn)view，然后在旋轉(zhuǎn)結(jié)束后更換view的背景，考慮到需要旋轉(zhuǎn)view，所以使用動(dòng)畫(huà)來(lái)實(shí)現(xiàn)

兩種實(shí)現(xiàn)方式1.方式一使用ObjectAnimator結(jié)合AnimatorSet

核心過(guò)程如下：

創(chuàng)建布局，一個(gè)容器，四個(gè)view，過(guò)程簡(jiǎn)單，這里不做介紹
創(chuàng)建兩個(gè)list，一個(gè)用來(lái)存放動(dòng)畫(huà)，一個(gè)用來(lái)存放view
使用ObjectAnimator創(chuàng)建四個(gè)動(dòng)畫(huà)，然后將動(dòng)畫(huà)放到list中
設(shè)置動(dòng)畫(huà)監(jiān)聽(tīng)，動(dòng)畫(huà)結(jié)束時(shí)更換view背景

核心代碼如下:

public void startAnimation01(){
  animators.clear();
  //創(chuàng)建四個(gè)動(dòng)畫(huà)，每個(gè)動(dòng)畫(huà)逆時(shí)針旋轉(zhuǎn)180度
  Animator animator01 = ObjectAnimator.ofFloat(imageView01,"RotationY",0,-180);
  Animator animator02 = ObjectAnimator.ofFloat(imageView02,"RotationY",0,-180);
  Animator animator03 = ObjectAnimator.ofFloat(imageView03,"RotationY",0,-180);
  Animator animator04 = ObjectAnimator.ofFloat(imageView04,"RotationY",0,-180);
  animators.add(animator01);
  animators.add(animator02);
  animators.add(animator03);
  animators.add(animator04);
  //循環(huán)中統(tǒng)一處理事件監(jiān)聽(tīng)，動(dòng)畫(huà)結(jié)束時(shí)更換每個(gè)view的背景
  for(int i=0;i<animators.size();i++){
   final int finalI = i;
   animators.get(i).addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {

    }

    @Override
    public void onAnimationEnd(Animator animation) {
     //更換背景
     imageViews.get(finalI).setBackgroundColor(Color.parseColor("#FFAEB9"));
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }
   });
  }
  AnimatorSet set = new AnimatorSet();
  //集合中的動(dòng)畫(huà)會(huì)順序執(zhí)行
  set.playSequentially(animators);
  set.setStartDelay(200);
  set.setDuration(300);
  set.start();
 }

2. 方式二使用ViewPropertyAnimator

上面的方法使用的ObjectAnimator來(lái)實(shí)現(xiàn)，ObjectAnimator的缺點(diǎn)就是實(shí)現(xiàn)起來(lái)代碼量比較大，重復(fù)的東西比較多。ViewPropertyAnimator可以以少量代碼實(shí)現(xiàn)效果，簡(jiǎn)介明了。

核心代碼如下：

public void startAnimation02(){
  for (int i=0;i<animators01.size();i++){
   final int finalI = i;
   animators01.get(i).setListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {

    }

    @Override
    public void onAnimationEnd(Animator animation) {
     imageViews.get(finalI).setBackgroundColor(Color.parseColor("#FFAEB9"));
    }

    @Override
    public void onAnimationCancel(Animator animation) {

    }

    @Override
    public void onAnimationRepeat(Animator animation) {

    }
   });
  }
 }

一開(kāi)始使用的rotationY，但是rotationY從效果上看只能執(zhí)行一次（其實(shí)是每次都會(huì)執(zhí)行，只是沒(méi)有變化而已），而rotationYBy則可以重復(fù)多次執(zhí)行。其他屬性也是同樣的效果。

效果展示

在這里插入圖片描述