2. 程式人生 > >《Android動畫高手成長記》跳跳球效果

《Android動畫高手成長記》跳跳球效果

阿新 • • 發佈：2018-12-23

在介紹本文動畫效果實現之前，先來介紹屬性動畫相關的幾個知識點。

  1. ValueAnimator與ObjectAnimator。
  2. Interpolator插值器與TypeEvaluator估值器。

在Android3.0之前，系統提供了兩種動畫效果實現方式，幀動畫frame-by-frame animation和補間動畫tweened animation。幀動畫就是類似電影播放一樣，將整部影片拆分成一片片的然後連貫起來播放。補間動畫則可以實現對view的縮放、平移、旋轉等操作。在3.0之後，出現了一種新的動畫模式稱為屬性動畫property animation。

屬性動畫產生的原因

屬性動畫的出現不是用來替代補間動畫的，而是用來解決補間動畫所不能夠完成的事件的。如果我們的需求超出了操控view的旋轉、縮放、平移等操作範圍，那麼我們就需選擇屬性動畫去實現了。那麼屬性動畫可以做到哪些補間動畫做不到的事情呢？下面列舉幾點，當然屬性動畫的功能很強大，不僅限於我列舉的幾點。

  1. 屬性動畫可以做到對一個非view類進行動畫操作。
  2. 屬性動畫可以做到真正的改變view物件的屬性值。而補間動畫只是改變了view的動畫效果。

ValueAnimator與ObjectAnimator

ObjectAnimator是屬性動畫中最總要的執行類，ObjectAnimator可以操作某個物件的屬性值，但是這個屬性值必須要有get和set方法，同時也可以設定view的執行線路，通過插值器來控制。
舉個簡單的例子：

ObjectAnimator
.ofFloat(view, "rotationY", 0.0F, 360.0F)
.setDuration(500)
.start();

其可操作的屬性有x/y；scaleX/scaleY；rotationX/ rotationY；transitionX/ transitionY等。
上面的例子是修改view的單個屬性值，同樣也可以同時修改多個屬性，下面介紹兩種

  1. PropertyValuesHolder屬性值持有者

    PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 1);

PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 1);

ObjectAnimator.ofPropertyValuesHolder( this, pvhLeft, pvhTop).

  2. 提供一個不存在的屬性值

    ObjectAnimator anim = ObjectAnimator.ofFloat(view, "long", 1.0F, 0.0F).setDuration(500);
anim.start();
anim.UpdateListener(new AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float cVal = (Float) animation.getAnimatedValue();
        view.setAlpha(cVal);
        view.setScaleX(cVal);
        view.setScaleY(cVal);
    }
});

上面提到的都是修改物件已有的setter和getter方法的屬性值。那麼如果物件沒有為某個屬性提供提供setter和getter方法呢，我們也可以做到修改這些屬性值，下面提供兩種實現方式：

  1. 通過valueAnimation來實現，這個下面會講解。

  2. 通過自己寫一個包裝類來實現。然後為該屬性提供setter和getter方法。

    class ViewWrapper{
    private View mView;
    public int getWidth(){
        return mView.getLayoutParams().width;
    }
}

ValueAnimator包含Property Animation動畫的所有核心功能，如動畫時間，開始、結束屬性值，相應時間屬性值計算方法等。
屬性動畫的應用有兩個步驟：
1、計算屬性的值。2、根據屬性值執行相應的動作。
ValueAnimator只是完成了第一步驟，而要完成第二步還要藉助於ValueAnimator.onUpdateListener介面，在此方法中可以通過ValueAnimator物件的getAnimatedValue()函式可以得到當前的屬性值。

ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
animation.setDuration(1000);
animation.addUpdateListener(new AnimatorUpdateListener  () {
    @Override
     public void onAnimationUpdate(ValueAnimator animation) {
         Log.i("update", ((Float)animation.getAnimatedValue()).toString());
         // 此處可以根據getAnimatedValue獲取到的屬性值改變view相關的屬性從而執行某些動作
     }
});
animation.setInterpolator(new CycleInterpolator(3));
animation.start();

Time Interpolator插值器與TypeEvaluator估值器

Time interplator：定義了屬性值變化的方式，如線性均勻改變，開始慢然後逐漸快等。在Property Animation中是TimeInterplator，在View Animation中是Interplator，這兩個是一樣的，在3.0之前只有Interplator，3.0之後實現程式碼轉移至了TimeInterplator。Interplator繼承自TimeInterplator，內部沒有任何其他程式碼。

  1. AccelerateInterpolator　加速，開始時慢中間加速
  2. DecelerateInterpolator　減速，開始時快然後減速
  3. AccelerateDecelerateInterolator　先加速後減速，開始結束時慢，中間加速
  4. AnticipateInterpolator　反向 ，先向相反方向改變一段再加速播放
  5. AnticipateOvershootInterpolator　反向加回彈，先向相反方向改變，再加速播放，會超出目的值然後緩慢移動至目的值
  6. BounceInterpolator　跳躍，快到目的值時值會跳躍，如目的值100，後面的值可能依次為85，77，70，80，90，100
  7. CycleIinterpolator　迴圈，動畫迴圈一定次數，值的改變為一正弦函式：Math.sin(2 * mCycles * Math.PI * input)
  8. LinearInterpolator　線性，線性均勻改變
  9. OvershottInterpolator　回彈，最後超出目的值然後緩慢改變到目的值
  10. TimeInterpolator　一個介面，允許你自定義interpolator，以上幾個都是實現了這個介面

TypeEvaluator：根據屬性的開始、結束值與TimeInterpolation計算出的因子計算出當前時間的屬性值，android提供了以下幾個evalutor：

  1. IntEvaluator：屬性的值型別為int。
  2. FloatEvaluator：屬性的值型別為float。
  3. ArgbEvaluator：屬性的值型別為十六進位制顏色值。
  4. TypeEvaluator：一個介面，可以通過實現該介面自定義Evaluator。

當然我們也可以自己定義估值器，如下：

public class FloatEvaluator implements TypeEvaluator {
     public Object evaluate(float fraction, Object startValue, Object endValue) {
            float startFloat = ((Number) startValue).floatValue();
            return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
     }
}

例項
接下來我們要實現的就是如下的 效果圖：
這裡寫圖片描述
在本例的實現中我們的重點也是在ValueAnimator和ObjectAnimator中讀者可以結合上述知識內容來消化本例的動畫技術。附上程式碼：

package com.example.custom.animation;

import java.util.ArrayList;

import com.example.custom.R;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.LinearLayout;

public class BouncingBalls extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bouncing_balls);
        LinearLayout container = (LinearLayout) findViewById(R.id.container);
        container.addView(new MyAnimationView(this));
    }

    public class MyAnimationView extends View {

        private static final int RED = 0xffFF8080;
        private static final int BLUE = 0xff8080FF;

        public final ArrayList<ShapeHolder> balls = new ArrayList<ShapeHolder>();
        AnimatorSet animation = null;


        public MyAnimationView(Context context) {
            super(context);
            ValueAnimator colorAnim = ObjectAnimator.ofInt(this, "backgroundColor", RED, BLUE);
            colorAnim.setDuration(3000);
            colorAnim.setEvaluator(new ArgbEvaluator());
            colorAnim.setRepeatCount(ValueAnimator.INFINITE);
            colorAnim.setRepeatMode(ValueAnimator.REVERSE);
            colorAnim.start();
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {

            if (event.getAction() != MotionEvent.ACTION_DOWN &&
                    event.getAction() != MotionEvent.ACTION_MOVE) {
                return false;
            }

            // 初始化一個跳跳球
            ShapeHolder newBall = initBouncingBall(event.getX(), event.getY());

            float startY = newBall.getY();
            float endY = getHeight() - 50;
            float h = (float)getHeight();
            float eventY = event.getY();
            int duration = (int)(500 * ((h - eventY)/h));

            // 操作newBall的Y屬性值
            ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "y", startY, endY);
            bounceAnim.setDuration(duration);
            bounceAnim.setInterpolator(new AccelerateInterpolator());

            ValueAnimator squashAnim1 = ObjectAnimator.ofFloat(newBall, "x", newBall.getX(),newBall.getX() - 25f);
            squashAnim1.setDuration(duration/4);
            squashAnim1.setRepeatCount(1);
            squashAnim1.setRepeatMode(ValueAnimator.REVERSE);
            squashAnim1.setInterpolator(new DecelerateInterpolator());

            ValueAnimator squashAnim2 = ObjectAnimator.ofFloat(newBall, "width", newBall.getWidth(),newBall.getWidth() + 50);
            squashAnim2.setDuration(duration/4);
            squashAnim2.setRepeatCount(1);
            squashAnim2.setRepeatMode(ValueAnimator.REVERSE);
            squashAnim2.setInterpolator(new DecelerateInterpolator());

            ValueAnimator stretchAnim1 = ObjectAnimator.ofFloat(newBall, "y", endY, endY + 25f);
            stretchAnim1.setDuration(duration/4);
            stretchAnim1.setRepeatCount(1);
            stretchAnim1.setInterpolator(new DecelerateInterpolator());
            stretchAnim1.setRepeatMode(ValueAnimator.REVERSE);

            ValueAnimator stretchAnim2 = ObjectAnimator.ofFloat(newBall, "height",newBall.getHeight(), newBall.getHeight() - 25);
            stretchAnim2.setDuration(duration/4);
            stretchAnim2.setRepeatCount(1);
            stretchAnim2.setInterpolator(new DecelerateInterpolator());
            stretchAnim2.setRepeatMode(ValueAnimator.REVERSE);

            ValueAnimator bounceBackAnim = ObjectAnimator.ofFloat(newBall, "y", endY, startY);
            bounceBackAnim.setDuration(duration);
            bounceBackAnim.setInterpolator(new DecelerateInterpolator());

            AnimatorSet bouncer = new AnimatorSet();
            bouncer.play(bounceAnim).before(squashAnim1);
            bouncer.play(squashAnim1).with(squashAnim2);
            bouncer.play(squashAnim1).with(stretchAnim1);
            bouncer.play(squashAnim1).with(stretchAnim2);
            bouncer.play(bounceBackAnim).after(stretchAnim2);

            ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
            fadeAnim.setDuration(250);
            fadeAnim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    balls.remove(((ObjectAnimator)animation).getTarget());
                }
            });

            AnimatorSet animatorSet = new AnimatorSet();
            animatorSet.play(bouncer).before(fadeAnim);

            animatorSet.start();

            return true;
        }

        private ShapeHolder initBouncingBall(float x, float y) {

            int red = (int)(Math.random() * 255);
            int green = (int)(Math.random() * 255);
            int blue = (int)(Math.random() * 255);
            int color = 0xff000000 | red << 16 | green << 8 | blue;
            int darkColor = 0xff000000 | red/4 << 16 | green/4 << 8 | blue/4;

            // 例項化一個圓形
            OvalShape circle = new OvalShape();
            circle.resize(50f, 50f);

            // 設定畫筆的形狀
            ShapeDrawable drawable = new ShapeDrawable(circle);
            Paint paint = drawable.getPaint(); 

            // 第一個,第二個引數表示漸變圓中心座標，半徑，圓心顏色，圓邊緣顏色，渲染器平鋪模式
            RadialGradient gradient = new RadialGradient(37.5f, 12.5f, 50f, color, darkColor, Shader.TileMode.CLAMP);
            // 給畫筆設定著色器
            paint.setShader(gradient);

            ShapeHolder shapeHolder = new ShapeHolder(drawable);
            shapeHolder.setX(x - 25f);
            shapeHolder.setY(y - 25f);
            shapeHolder.setPaint(paint);
            balls.add(shapeHolder);

            return shapeHolder;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            for (int i = 0; i < balls.size(); ++i) {
                ShapeHolder shapeHolder = balls.get(i);
                canvas.save();
                canvas.translate(shapeHolder.getX(), shapeHolder.getY());
                shapeHolder.getShape().draw(canvas);
                canvas.restore();
            }
        }
    }
}
package com.example.custom.animation;

import android.graphics.Paint;
import android.graphics.RadialGradient;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.Shape;
import android.view.View;


public class ShapeHolder {
    private float x = 0, y = 0;
    private int color;
    private float alpha = 1f;
    private Paint paint;
    private ShapeDrawable shape;
    private RadialGradient gradient;
    public void setPaint(Paint value) {
        paint = value;
    }
    public Paint getPaint() {
        return paint;
    }

    public void setX(float value) {
        x = value;
    }
    public float getX() {
        return x;
    }
    public void setY(float value) {
        y = value;
    }
    public float getY() {
        return y;
    }
    public void setShape(ShapeDrawable value) {
        shape = value;
    }
    public ShapeDrawable getShape() {
        return shape;
    }
    public int getColor() {
        return color;
    }
    public void setColor(int value) {
        shape.getPaint().setColor(value);
        color = value;
    }
    public void setGradient(RadialGradient value) {
        gradient = value;
    }
    public RadialGradient getGradient() {
        return gradient;
    }

    public void setAlpha(float alpha) {
        this.alpha = alpha;
        shape.setAlpha((int)((alpha * 255f) + .5f));
    }

    public float getWidth() {
        return shape.getShape().getWidth();
    }

    public void setWidth(float width) {
        Shape s = shape.getShape();
        s.resize(width, s.getHeight());
    }

    public float getHeight() {
        return shape.getShape().getHeight();
    }
    public void setHeight(float height) {
        Shape s = shape.getShape();
        s.resize(s.getWidth(), height);
    }

    public ShapeHolder(ShapeDrawable s) {
        shape = s;
    }
}

相關推薦

《Android動畫高手成長記》跳跳球效果

在介紹本文動畫效果實現之前，先來介紹屬性動畫相關的幾個知識點。 ValueAnimator與ObjectAnimator。 Interpolator插值器與TypeEvaluator估值器。 在Android3.0之前，系統提供了兩種動畫效果實現方式，幀

200多種Android動畫效果的強悍框架

lsh ron dmi spl adb 下拉選擇 源代碼 社區 eee admin 發布於2015-10-23 14:33 363/68015 【精品推薦】200多種Android動畫效果的強悍框架，太全了，不看這個，再有動畫的問題，不理你了^@^ 功能模塊

Android動畫效果之Frame Animation（逐幀動畫）

想要 顯示 star 載體 rop 復雜 ide sources post 前言： 上一篇介紹了Android的Tween Animation（補間動畫） Android動畫效果之Tween Animation（補間動畫），今天來總結下Android的另外一種動

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

android成長記(2)-------關於apk的生成以及使用

am start -ncom.android.settings/com.android.settings.Settings 該命令用於啟動單獨的某個應用。 Settings.apk的路徑： out\target\product\mt5880\system\app\3rd 然後把apk

Android成長記(1)-----android環境搭建與adb shell 命令

整理一下學習android一步一步存下來的自己總結或是從網上摘抄的比較不錯的文件，電腦要上交了，最捨不得的就是自己積累的這麼點東西了，所以決定釋出到黎梓小站，以供大家一起學習以及自己日後忘記了也有地方可找。 1.      htt

好看的android動畫效果

這段時間看到一些比較好看的android動畫效果，下面我就給大家一些我比較喜歡的動畫效果，並附上原始碼希望對你們有用處。 1.很簡單卻很酷的粒子破碎效果 介紹：  實現思路 1.新建一個 Bean Particle，表示一個粒子物件；新建一個 View 

Android 動畫分析之翻轉效果

大家一定看到過三維的翻轉效果，所以今天在這裡簡單的給大家分析一下，我們怎麼樣才能實現Android中的翻轉動畫效果的實現，首先看一下執行效果如下圖所示。 效果圖： Android中並沒有提供直接做3D翻轉的動畫，所以關於3D翻轉的動畫效果需要我們自己實現，那麼我們首先

Android成長記 1 -----android環境搭建與adb shell 命令

                整理一下學習android一步一步存下來的自己總結或是從網上摘抄的比較不錯的文件，電腦要上交了，最捨不得的就是自己積累的這麼點東西了，所以決定釋出到黎梓小站，以供大家一起學習以及自己日後忘記了也有地方可找。2.      該網址詳細介紹瞭如何安裝android4.1 SDK。a

Android -- 自定義ViewGroup+貝塞爾+屬性動畫實現仿QQ點贊效果

private void init(final Context context) { mStarDrawable = new ArrayList<>(); mInterpolators = new ArrayList<>(); mSt

Android動畫篇（四）：最終效果篇CircleProgressSuperBar

前言 今天終於有時間把最後的成果分享給大家了，為了提高一下部落格的逼格，我也找了一個專門做原型、導圖的線上網站：processon（www.processon.com），這個工具真的很棒，也很方便，這裡給他點個贊。 CircleProgressSuperBa

android 動畫效果 translate 詳解，包括 Dialog 上方彈出，底部彈出，中間彈出

先給出動畫效果程式碼，可以直接拿去用： 1.上方彈出: 滑入動畫（ actionsheet_dialog_in）： <translate     xmlns:android="http://schemas.android.com/apk/res/android"

Android自定義View——實現水波紋效果類似剩餘流量球

最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪製一個正弦曲線(sin)或者餘弦曲線(cos) 通過水平平移曲線來的到像水

200多種Android動畫效果的強悍框架，太全了

概要： Android近200多種動畫效果集合框架原始碼，太全了，總有你需要的，木有你找不到的，相當強悍，非常棒的產品開發原型參考和學習資料 主要功能列表： 1）Splash動畫 (中心開啟式效果 ) 2）Flip摺疊效果的集合(13種) 3）NineOld集合

Android動畫(圖片閃爍、左右搖擺、上下晃動等效果)

通常我們需要一個item連續的播放某一段動畫或者迴圈的執行某個動畫，這裡我們就可以用到一下技巧。 一、續播 (不知道取什麼名字好，就是先播放動畫A， 接著播放動畫B) 有兩種方式： 第一種： 分別定義兩個動畫，A和B， 然後先播放動畫A，設定A 的 AnimationListener。當onAnimati

Android動畫效果之自定義ViewGroup添加布局動畫

前言：      前面幾篇文章介紹了補間動畫、逐幀動畫、屬性動畫，大部分都是針對View來實現的動畫，那麼該如何為了一個ViewGroup新增動畫呢？今天結合自定義ViewGroup來學習一下佈局動畫。本文將通過對自定義圖片選擇控制元件設定動畫為例來學習佈局動畫。      其他幾種動畫效果：  自定義

【Android】Android開發之常用的loading等待效果實現，仿微博等待動畫。兩種實現方式詳解

長期維護的Android專案，裡面包括常用功能實現，以及知識點詳解， 當然還有Java中的知識點。 具體請看github：https://github.com/QQ986945193/DavidAndroidProjectTools 首先大家都知道，當我

Android中實現波浪球效果

波浪球的效果一直都是想模仿的物件，在最近一段時間裡模仿了這一介面，其實所用知識並不多。 1>波浪的效果是利用三角函式來實現的，在自定義view中建立容量為width的陣列，由y=Asin(Kx+T)+H得到每個x相對應的y值，然後存入數組裡面。 2>利用A

Android動畫效果

Android動畫 Animation動畫 - Frame動畫 - Tween動畫 通常電影裡面的畫面持續時間長為一秒24幀 直接看程式碼吧 package com.example.myanimotor; import android.ani

Android 動畫1--View控制元件的顯示和隱藏效果

顯示動畫 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,                         Animation.RELATIVE_TO_SELF, 0.0f, Animation.RE