自定义View | ofObject详解与实战(ValueAnimator进阶)

  • ofInt()ofFloat()函数用来定义动画,
    ofInt()函数只能传入Integer类型的值,
    ofFloat()函数则只能传入Float类型的值。

  • 如果需要操作其他类型的变量,
    需要使用ValueAnimator另一个函数ofObject()
    可以传入任何类型的变量。

  • Ctrl + 左键看一下源码对ofObject()的定义

    public static ValueAnimator ofObject(TypeEvaluator evaluator, Object... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setObjectValues(values);
        anim.setEvaluator(evaluator);
        return anim;
    }
  • 第一个参数是自定义Evaluator
    第二个参数是可变长参数,属于Object类型;

  • 第一个参数Evaluator的作用:
    根据当前动画的数值进度计算出当前进度所对应的值。

    既然Object对象是我们自定义的,
    那必然从进度到值的转换过程也必须由我们来做,
    否则系统不可能知道我们要将数值进度转换成什么具体值

  • 使用ofObject()函数实现将TextView的内容从字母A变化到Z

    private void startAnimationTestCharEvaluator() {
        ValueAnimator animator = ValueAnimator.ofObject(new CharEvaluator(), 'A', 'Z');

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                char text = (Character) animation.getAnimatedValue();
                tv_text.setText(String.valueOf(text));
            }
        });
        animator.setDuration(10000);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.start();
    }
这里注意两个地方
  • 第一,构造ValueAnimator时,传入了一个自定义CharEvaluator;
    在初始化动画时,传入的是Character对象 字母A字母Z

    在这里要实现的效果是:
    对Character对象应用动画,
    动画自动将字母A变化到字母Z

    具体实现则封装CharEvaluator中,
    这里只需知道,
    构造ValueAnimator时传入的是两个Character对象,
    一个是起始值,另一个是终止值,即可。

  • 第二,监听;
    !!!构造类型返回值类型相一致!!!
    先通过animation.getAnimatedValue()函数得到当前动画的字符
    然后把字符设置给TextView

    构造ValueAnimator时,
    传入的值类型Character对象
    所以
    在动画过程中通过Evaluator 返回的值类型
    必然跟构造时的类型一致的
    也是Character对象。

ASCII码表中数字与字符的转换方法
  • ASCII码表中,每个字符都有数字与它一一对应
    字母A~Z之间的所有字母对应的数字区间为65~90

  • 在程序中,可以数字强制转换成对应的字符

  • 数字转字符
    char temp =(char)65;//得到的 temp的值 就是 大写字母A

  • 字符转数字
    char temp = 'A';
    int num = (int) temp;
    //这里得到的num值就是对应的ASCII码值65

实现CharEvaluator
public class CharEvaluator implements TypeEvaluator<Character> {

    @Override
    public Character evaluate(float fraction, Character startValue, Character endValue) {
        int startInt = (int)startValue;
        int endInt = (int)endValue;
        int curInt = (int) (startInt + fraction * (endInt - startInt));

        char result = (char) curInt;
        
        return result;
    }

}
  • 先把Character对象转换成Int去运算,
    再把运算完的Int结果转换成Character返回

案例:抛物动画

插值器只能改变动画进展的快慢,
而Evaluator则可以改变返回的值。

Evaluator与ofObject结合
使得ValueAnimator更加强大
使参数可以在Evaluator中处理,
并返回给一个自定义的对象

  • 下面实现一个抛物动画,
    当单击按钮时,圆球开始向下做抛物运动,
    在滚动一段距离后结束;
实现(FallingBallActivity)

1.利用shape标签实现一个圆形Drawable(drawable/circle.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape='oval'>
    
    <solid android:color="#0066FF"/>
    
</shape>

2.FallingBallActivity布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CustomViews.FallingBallActivity">

    <ImageView
        android:id="@+id/ball_img"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/circle"/>

    <Button
        android:id="@+id/start_fallingBallAnim"
        android:text="StartAnim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
  1. Activity代码
    核心在于button的点击事件,
    注意代码中注释:

这里需要定义球的位置,
需要实时计算出当前球所在的 X,Y 坐标,
所以ValueAnimator要返回含有X,Y坐标的对象
才能将球移动到指定位置;
这里使用Point对象来返回球在每一时刻的位置

public class FallingBallActivity extends AppCompatActivity {

    private Button startAnim;
    private ImageView ballImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_falling_ball);

        initViews();
    }

    private void initViews() {
        startAnim = findViewById(R.id.start_fallingBallAnim);
        ballImg = findViewById(R.id.ball_img);

        startAnim.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //设置自定义Evaluator, 以及初始值终止值(皆为Point类型)
                ValueAnimator animator = ValueAnimator.ofObject(new FallingBallEvaluator(),
                        new Point(0, 0), new Point(500, 500));

                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        Point mCurPoint = (Point) animation.getAnimatedValue();

                        //以函数x,y值为左上坐标,加以自身宽高为右下坐标
                        ballImg.layout(mCurPoint.x, mCurPoint.y, mCurPoint.x + ballImg.getWidth(),
                                mCurPoint.y + ballImg.getHeight());
                    }
                });
                animator.setDuration(2000);
                animator.start();
            }
        });
    }
}
  1. 最重要的FallingBallEvaluator,
    由它返回每一时刻球的实际位置。
public class FallingBallEvaluator implements TypeEvaluator<Point> {

    private Point point = new Point();

    @Override
    public Point evaluate(float fraction, Point startValue, Point endValue) {
        point.x = (int) (startValue.x + fraction * (endValue.x - startValue.x));

        //y为二倍速
        if (fraction * 2 <= 1) {

            //y二倍速,若未完成,继续二倍刷新
            point.y = (int) (startValue.y + fraction * 2 * (endValue.y - startValue.y));
        } else {
            //如果完成,则不变
            point.y = endValue.y;
        }

        return point;
    }
}
计算point,把x、y值分开来算
  • x值的运算结果赋给结果point对象的x,
    y值的运算结果赋给结果point对象的y,
    即可
  • 在抛物运动中,
    物体在X轴方向的速度是不变的,所以在X轴方向它的实时位置是:
    point.x=(int)(startValue.x+fraction*(endValue.x-startValue.x));
    而在Y轴方向则是s=V0t+gt*t。
    其中,V0表示初始速度;
    g是重力加速度,取值是9.8;t表示当前的时间。

  • 而在这里我们是没有时间概念的,只有fraction表示的进度,
    所以要想完美匹配这个自由落体公式,
    需要复杂的计算,这不是本例的重点。

  • 这里取一个折中公式:将实时进度乘以2作为当前进度。
    很显然,Y轴的进度会首先完成(变成1),
    这时X轴还是会继续前进的,
    所以在视觉上会产生落地后继续滚动的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容