animation之objectAnimator

最新推荐文章于 2021-05-26 07:52:31 发布
最新推荐文章于 2021-05-26 07:52:31 发布
阅读量4.3k 收藏
点赞数
分类专栏： android 文章标签： animation android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serapme/article/details/46925637
版权

这次借助github上的开源项目ShapeLoadingView来学习下ObjectAnimator和animatorSet.
代码结构目录：

  1. ShapeLoadingView.java
  2. LoadingView.java
    LoadingView是绘制三个基本图形的类。
    ShapeLoadingView初始化图形并操作图形进行动画。
    下面上加了注释的代码：
package com.mingle.widget;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Build;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.mingle.shapeloading.R;
import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;


/**
 * Created by zzz40500 on 15/4/6.
 */
public class LoadingView extends FrameLayout {

    private static final int ANIMATION_DURATION = 500;

    private static  float mDistance = 200;

    private ShapeLoadingView mShapeLoadingView;

    private ImageView mIndicationIm;

    private TextView mLoadTextView;
    private int mTextAppearance;

    private String mLoadText;


    public LoadingView(Context context) {
        super(context);
    }

    public LoadingView(Context context, AttributeSet attrs) {
        //构造函数
        super(context, attrs, 0);
        init(context, attrs);

    }

    private void init(Context context, AttributeSet attrs) {
        //这里是通过自定义属性来显示字符串
        TypedArray typedArray = context
                .obtainStyledAttributes(attrs, R.styleable.LoadingView);
        mLoadText = typedArray.getString(R.styleable.LoadingView_loadingText);
        mTextAppearance = typedArray.getResourceId(R.styleable.LoadingView_loadingTextAppearance, -1);

        typedArray.recycle();
    }


    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        //构造函数
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }
    //这里定义了一个针对LL版本的构造函数，我这可能因为sdk版本这里会报错，如果报错注释掉就行了
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }
    //dp和像素的转换
    public int dip2px(float dipValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    //引入布局
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();

        View view = LayoutInflater.from(getContext()).inflate(R.layout.load_view, null);

        mDistance = dip2px(54f);

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

        layoutParams.gravity = Gravity.CENTER;

        mShapeLoadingView = (ShapeLoadingView) view.findViewById(R.id.shapeLoadingView);

        mIndicationIm = (ImageView) view.findViewById(R.id.indication);
        mLoadTextView = (TextView) view.findViewById(R.id.promptTV);

        if (mTextAppearance != -1) {
            mLoadTextView.setTextAppearance(getContext(), mTextAppearance);
        }
        setLoadingText(mLoadText);
        //显示绘画布局
        addView(view, layoutParams);
        //这里是设计一个延时 每隔900调用一次跌落，相当于900ms是一次动画的周期
        this.postDelayed(new Runnable() {
            @Override
            public void run() {
                freeFall();
            }
        }, 900);


    }

    public void setLoadingText(CharSequence loadingText) {

        if (TextUtils.isEmpty(loadingText)) {
            mLoadTextView.setVisibility(GONE);
        } else {
            mLoadTextView.setVisibility(VISIBLE);
        }

        mLoadTextView.setText(loadingText);
    }

    /**
     * 上抛，上抛是动画的核心，上抛是两个组合动作：1，图形进行旋转；2，图形向上平移，同时还有下面阴影部分随着图形位置变化
     * 进行的跟随变化。这里使用了ObjectAnimator来控制每个动画的动作，最后使用AnimatorSet将三个部分组合在一起。
     * 看一下具体的动作
     */
    public void upThrow() {
        //mShapeLoadingView就是LoadingView里面绘制的图形买第一个objectAnimator控制它进行平移
        //使用objectAnimator.ofFloat及参数translationY来进行纵向的平移
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", mDistance, 0);
        //动画下部的阴影这里使用ofFloat及参数scaleX来进行X轴的缩放，02f-1是缩放比例 阴影在20%到100%之间变化
        ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 0.2f, 1);

        //这段是对图形做一个旋转的动作
        ObjectAnimator objectAnimator1 = null;
        switch (mShapeLoadingView.getShape()) {
            case SHAPE_RECT:


                objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, -120);

                break;
            case SHAPE_CIRCLE:
                objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180);

                break;
            case SHAPE_TRIANGLE:

                objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180);

                break;
        }

        //设置animation的持续时间，通过setDuration.
        objectAnimator.setDuration(ANIMATION_DURATION);
        objectAnimator1.setDuration(ANIMATION_DURATION);
        //设置一个减速插值器
        objectAnimator.setInterpolator(new DecelerateInterpolator(factor));
        objectAnimator1.setInterpolator(new DecelerateInterpolator(factor));
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATION_DURATION);
        //animatorSet的方法playtogther让三个动画同时运行
        animatorSet.playTogether(objectAnimator, objectAnimator1, scaleIndication);


        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                freeFall();


            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animatorSet.start();


    }

    public float factor = 1.2f;

    /**
     * 下落
     */
    public void freeFall() {
        //主要的点和上抛一致不讲了
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", 0, mDistance);
        ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 1, 0.2f);


        objectAnimator.setDuration(ANIMATION_DURATION);
        objectAnimator.setInterpolator(new AccelerateInterpolator(factor));
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(ANIMATION_DURATION);
        animatorSet.playTogether(objectAnimator, scaleIndication);
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {

                //下落到底端改变图形
                mShapeLoadingView.changeShape();
                upThrow();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animatorSet.start();


    }

}

package com.mingle.widget;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

import com.mingle.shapeloading.R;

/**
 * Created by zzz40500 on 15/4/4.
 */
public class ShapeLoadingView extends View {


    private static final float genhao3 = 1.7320508075689f;
    private static  final  float mTriangle2Circle =0.25555555f;

    private Shape mShape = Shape.SHAPE_CIRCLE;

    /**
     * 用贝赛尔曲线画圆
     */
    private float mMagicNumber = 0.55228475f;

    public ShapeLoadingView(Context context) {
        super(context);
        init();
    }

    public ShapeLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(getResources().getColor(R.color.triangle));
        mPaint.setAntiAlias(true);
        //看到网上说这个FILL_AND_STROKE有去锯齿的作用
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        setBackgroundColor(getResources().getColor(R.color.view_bg));
    }

    public boolean mIsLoading = false;


    private Paint mPaint;

    private float mControlX = 0;
    private float mControlY = 0;

    private float mAnimPercent;


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制三个图形的三角形方框圆形的位置，作者在这里标记动画可以优化，估计会有后续修改
        if(getVisibility()==GONE){
            return;
        }
        // FIXME: 15/6/15  动画待优化
        switch (mShape) {
            case SHAPE_TRIANGLE:

                if (mIsLoading) {
                    mAnimPercent += 0.1611113;
                    // triangle to circle
                    Path path = new Path();
                    path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f));

                    if (mAnimPercent >= 1) {
                        mShape = Shape.SHAPE_CIRCLE;
                        mIsLoading = false;
                        mAnimPercent=1;
                    }
                    float controlX = mControlX - relativeXFromView(mAnimPercent* mTriangle2Circle)
                            * genhao3;

                    float controlY = mControlY - relativeYFromView(mAnimPercent* mTriangle2Circle);


                    path.quadTo(relativeXFromView(1) - controlX, controlY, relativeXFromView(0.5f + genhao3 / 4), relativeYFromView(0.75f));


                    path.quadTo(relativeXFromView(0.5f), relativeYFromView(0.75f + 2 * mAnimPercent* mTriangle2Circle), relativeXFromView(0.5f - genhao3 / 4), relativeYFromView(0.75f));

                    path.quadTo(controlX, controlY, relativeXFromView(0.5f), relativeYFromView(0f));
                    path.close();
                    canvas.drawPath(path, mPaint);

                    invalidate();

                } else {
                    Path path = new Path();
                    mPaint.setColor(getResources().getColor(R.color.triangle));

                    path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f));
                    path.lineTo(relativeXFromView(1), relativeYFromView(genhao3 / 2f));
                    path.lineTo(relativeXFromView(0), relativeYFromView(genhao3/2f));

                    mControlX = relativeXFromView(0.5f - genhao3 / 8.0f);
                    mControlY = relativeYFromView(3 / 8.0f);
                    mAnimPercent = 0;
                    path.close();
                    canvas.drawPath(path, mPaint);

                }
                break;
            case SHAPE_CIRCLE:


                if (mIsLoading) {
                    float magicNumber = mMagicNumber + mAnimPercent;
                    mAnimPercent += 0.12;
                    if (magicNumber + mAnimPercent >= 1.9f) {
                        mShape = Shape.SHAPE_RECT;
                        mIsLoading = false;
                    }

                    Path path = new Path();

                    path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f));
                    path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(0f),
                            relativeXFromView(1), relativeYFromView(0.5f - magicNumber / 2),
                            relativeXFromView(1f), relativeYFromView(0.5f));
                    path.cubicTo(
                            relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2),
                            relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f),
                            relativeXFromView(0.5f), relativeYFromView(1f));
                    path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f),
                            relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2),
                            relativeXFromView(0f), relativeYFromView(0.5f));
                    path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2),
                            relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0),
                            relativeXFromView(0.5f), relativeYFromView(0f));


                    path.close();
                    canvas.drawPath(path, mPaint);


                    invalidate();
                } else {      mPaint.setColor(getResources().getColor(R.color.circle));
                    Path path = new Path();

                    float magicNumber = mMagicNumber;
                    path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f));
                    path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), 0,
                            relativeXFromView(1), relativeYFromView(magicNumber / 2),
                            relativeXFromView(1f), relativeYFromView(0.5f));
                    path.cubicTo(
                            relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2),
                            relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f),
                            relativeXFromView(0.5f), relativeYFromView(1f));
                    path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f),
                            relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2),
                            relativeXFromView(0f), relativeYFromView(0.5f));
                    path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2),
                            relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0),
                            relativeXFromView(0.5f), relativeYFromView(0f));
                    mAnimPercent = 0;
                    path.close();
                    canvas.drawPath(path, mPaint);
                }
                break;
            case SHAPE_RECT:
                if (mIsLoading) {
                    mAnimPercent += 0.15;
                    if (mAnimPercent >= 1) {
                        mShape = Shape.SHAPE_TRIANGLE;
                        mIsLoading = false;
                        mAnimPercent = 1;
                    }
                    Path path = new Path();
                    path.moveTo(relativeXFromView(0.5f * mAnimPercent), 0);
                    path.lineTo(relativeYFromView(1 - 0.5f * mAnimPercent), 0);
                    float distanceX = (mControlX) * mAnimPercent;
                    float distanceY = (relativeYFromView(1f) - mControlY) * mAnimPercent;

                    path.lineTo(relativeXFromView(1f) - distanceX, relativeYFromView(1f) - distanceY);
                    path.lineTo(relativeXFromView(0f) + distanceX, relativeYFromView(1f) - distanceY);

                    path.close();
                    canvas.drawPath(path, mPaint);
                    invalidate();

                } else {
                    mPaint.setColor(getResources().getColor(R.color.rect));
                    mControlX = relativeXFromView(0.5f - genhao3 / 4);
                    mControlY = relativeYFromView(0.75f);
                    Path path = new Path();
                    path.moveTo(relativeXFromView(0f), relativeYFromView(0f));
                    path.lineTo(relativeXFromView(1f), relativeYFromView(0f));
                    path.lineTo(relativeXFromView(1f), relativeYFromView(1f));
                    path.lineTo(relativeXFromView(0f), relativeYFromView(1f));
                    path.close();
                    mAnimPercent = 0;
                    canvas.drawPath(path, mPaint);
                }
                break;
        }

    }

    private float relativeXFromView(float percent) {
        return getWidth() * percent;
    }

    private float relativeYFromView(float percent) {
        return getHeight() * percent;
    }

    public void changeShape() {
        mIsLoading = true;


        invalidate();

    public enum Shape {
        SHAPE_TRIANGLE, SHAPE_RECT, SHAPE_CIRCLE
    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(visibility);

        if(visibility==VISIBLE){
            invalidate();
        }
    }

    public Shape getShape() {
        return mShape;
    }
}

这个开源项目我们学习的两个主要知识
1.使用path绘制图形
2.ObjectAnimation&AnimatorSet
看了这个项目是不是可以用这两个知识点做一个自己喜欢的动画？
just do it.

serapme
关注
专栏目录
Android Animation、ObjectAnimator与ValueAnimator实现视图动画和属性动画
NoOneCode的博客
09-13 709
一、视图动画视图动画比较简单，它提供了AlphaAnimation、RotateAnimation、TranslateAnimation、ScaleAnimation四种动画方式。视图动画一个非常大的缺陷就是不具有交互性，当一个View发生视图动画后，其相应事件的位置依然在显示动画前的位置。但是优点也非常明显，即效率比较高且使用方便。1、透明度动画AlphaAnimation aa = new Al
android 属性动画之 ObjectAnimator
luo44671854的专栏
01-29 787
补间动画能实现的: 1.alpha  [java] view plain copy   //第一个参数为 view对象，第二个参数为 动画改变的类型，第三，第四个参数依次是开始透明度和结束透明度。           ObjectAnimator alpha = ObjectAnimator.ofFloat(text, "alpha", 0
Android-Animation 总结(三（ObjectAnimator）)
薛之涛
05-19 223
上一篇我们讲了ValueAnimator，今天我们讲一下ObjectAnimator,首先我在之前讲过，它继承自ValueAnimator,ValueAnimator是我们根据值的变化进行操作，而ObjectAnimator可以对对象或者对象的值进行操作，比如View的alpha等进行操作，因为是继承所以父类的属性它是可以直接用的。 ...
android object动画,android——ObjectAnimator动画(一)
weixin_42659196的博客
05-26 185
直接贴上集中用法package com.example.test;import com.example.test.views.CircleView;import android.animation.Animator;import android.animation.AnimatorSet;import android.animation.Keyframe;import android.animat...
动画开源库NineOldAndroids的使用
蓝枫
03-07 1334
先上一张图：MainActivity.javapackage com.zhoujian.nineoldandroids;import android.annotation.TargetApi; import android.app.Activity; import android.os.Build; import android.os.Bundle; import android.util.Log;
Fragment - Unknow animation name objectAnimator 问题解决及源码分析
最新发布
04-28
### Fragment - Unknow animation name objectAnimator 问题解决及源码分析 #### 一、问题背景与现象 在进行Android应用开发的过程中，特别是在处理系统加速模块时，开发者可能会遇到使用`Fragment`进行页面切换并...
android属性动画效果的实现之ObjectAnimator
03-11
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 0f, 100f); animation.setDuration(1000); // 设置动画时长为1000毫秒 animation.start(); // 开始动画 ``` 除了手动设置，还可以通过...
android objectanimator animation
03-28
ObjectAnimator是Android SDK中提供的一种高级动画机制，它属于Property Animation系统的一部分，能够对对象的属性进行动画处理，包括移动、透明度变化、缩放和旋转等多种效果。下面我们将深入探讨如何使用...
ObjectAnimator
05-28
**ObjectAnimator**是Android平台中的一个关键组件，用于实现**属性动画(Property Animation)**系统。属性动画是Android 3.0（API级别11）引入的一种强大的动画机制，它允许开发者在不改变对象状态的情况下，模拟...
NineOldAndroidsDemos 学习(3) PathAnimationActivity
梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到安宁.
10-31 1122
这个也很简单,其实就是为了让view 可以 按照预设的路径运动,这个在很多变态的动画中非常有用 /* * Copyright (C) 2012 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use thi
属性动画 平移，旋转，缩放，透明度变化，使用ValueAnimator和ObjectAnimator实现 基于贝塞尔曲线实现的仿qq点赞效果的自定义ViewGr
05-11
属性动画 平移，旋转，缩放，透明度变化，使用ValueAnimator和ObjectAnimator实现 基于贝塞尔曲线实现的仿qq点赞效果的自定义ViewGroup
nineoldandroids动画开源框架的使用
luoxiping1的专栏
02-09 1931
其功能和android.animation.*中的类的功能完全一致，使用方法完全相同，只是我们使用nineoldandroids编写动画，可以在所有的Android平台上运行。 import com.nineoldandroids.animation.AnimatorSet; import com.nineoldandroids.animation.ArgbEvaluator; import c
NineOldAndroids动画兼容库的使用-ViewHelper
Lex 的博客
07-01 3734
功能介绍： NineOldAndroids是github上的一个开源项目，其作用是为了在低版本android上（API11以下）使用属性动画。它的原理其实也很简单，主要就是判断当前sdk版本，如果大于API11，那么就调用官方的API，否则自己实现动画效果。另外，在API使用方面，它与官方的属性动画基本一致。比如ObjectAnimator、ValueAnimator等等。一.基本使用 跟官方类似，
王学岗属性动画上(一)——ObjectAnimator
qczg_wxg的博客
11-17 595
*强调内容*package com.example.propertyOfGang;import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.animation.ValueAnimator.AnimatorUpdateListener; import androi
动画曲线
weixin_44047064的博客
06-04 541
点击红圈出现左边图可以改变曲线
ObjectAnimator设置动画
鸿蒙开发知识记录
12-29 597
ObjectAnimator是ValueAnimator的子类，他本身就已经包含了时间引擎和值计算，所以它拥有为对象的某个属性设置动画的功能。这使得为任何对象设置动画更加的容易。你不再需要实现 ValueAnimator.AnimatorUpdateListener接口，因为ObjectAnimator动画自己会自动更新相应的属性值。 ObjectAnimator的实例和ValueAnimator
ObjectAnimator的使用
qq_27632117的博客
08-20 424
ObjectAnimator是属性动画中一个很重要的类，它是继承自ValueAnimator的。通过ObjectAnimator的静态工厂方法可以创建一实例。可以调用一系列的重载的方法来完成动画的使用。 这里通过这些代码完成一个点击一张图片弹出所有图片ObjectAnimator可以在代码中实现也可以通过xml<?xml version="1.0" encoding="utf-8"?> <Rela
Android属性动画之ObjectAnimator控制
weixin_34390105的博客
02-14 118
　　Android为我们提供了大量的动画效果，如何通过这些动画来达到我们需要的效果呢？今天就为大家总结一下ObjectAnimator动画控制事件。 　　该项目的的布局文件只有两个控件：ImageView和Button，在这里就不在赘述了，下面我们来看一下activity的实现： public class TwoActivity extends Activity{ private...
Android 动画--使用Path来规划动画的轨迹
寒江蓑笠的专栏
07-11 9759
使用Path来规划动画的轨迹 public void testPathAnimator(){ final FrameLayout l = (FrameLayout) findViewById(R.id.root_view); final ImageView imageView = new ImageView(this); imageView.set
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值