Android 自定义动画view（小变大，旋转，色值）

也不知道到看了多少的动画总结了，但是用到的时候太少，过段时间就会忘记了。

既然如此，我选择直接去动手学习，步步进阶。

效果：

上代码之前我们分析一下才会加深自己的印象：

需要画一个矩形和一个圆形
需要计算位置，距离，大小
需要缩放，旋转，颜色渐变动画

代码：

package com.example.administrator.firsttest.animView;import android.animation.AnimatorSet;
import android.animation.Keyframe;
import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.LinearInterpolator;
import android.widget.TextView;/*** Created by Administrator on 2018/8/7.*/public class MyView extends View {Paint mPaint;int lineWidth = 10;int ratio = 50;int mColor = Color.BLUE;float rotate;public MyView(Context context) {this(context, null);}public MyView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {mPaint = new Paint();mPaint.setAntiAlias(true);mPaint.setColor(mColor);mPaint.setStyle(Paint.Style.FILL);mPaint.setStrokeWidth(lineWidth);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 由于动画中有更改颜色，所以这里每次onDraw都要重新设置下画笔颜色mPaint.setColor(mColor);//旋转动画，直接旋转画布即可canvas.rotate(rotate, getWidth() / 2, getHeight() / 2);// 画正方形，ratio为可边长的一半canvas.drawRect(getWidth() / 2 - ratio / 2, getHeight() / 2 - ratio / 2, getWidth() / 2 + ratio / 2, getHeight() / 2 + ratio / 2, mPaint);// 画圆形，ratio为半径canvas.drawCircle(getWidth() / 2, getHeight() / 2 - 2 * ratio, ratio, mPaint);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@TargetApi(Build.VERSION_CODES.LOLLIPOP)public void start(){// 旋转动画，通过改变rotate值实现ValueAnimator rotateAni = ValueAnimator.ofFloat(0, 360);//无限重复rotateAni.setRepeatCount(Animation.INFINITE);// 设置监听，赋值给rotaterotateAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {rotate = (float) animation.getAnimatedValue();invalidate();}});//放大动画，通过改变ratio实现ValueAnimator rotateAnimator = ValueAnimator.ofInt(50, 100);rotateAnimator.setInterpolator(new LinearInterpolator());rotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {ratio = (int) animation.getAnimatedValue();}});rotateAnimator.setRepeatCount(-1);// 设置重复的模式为原样恢复，即放大后再按原路缩小，这样才不会出现跳动rotateAnimator.setRepeatMode(ValueAnimator.REVERSE);//颜色变化动画ValueAnimator colorAni = ValueAnimator.ofArgb(Color.BLUE, Color.GREEN);colorAni.setInterpolator(new LinearInterpolator());colorAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mColor = (int) animation.getAnimatedValue();}});colorAni.setRepeatCount(-1);// 设置重复的模式为原样恢复，即放大后再按原路缩小，这样才不会出现跳动colorAni.setRepeatMode(ValueAnimator.REVERSE);AnimatorSet set = new AnimatorSet();set.setDuration(1000);set.play(rotateAnimator).with(colorAni).with(rotateAni);set.start();Keyframe keyframe = Keyframe.ofFloat(0f, 0);}}
//我在例子中用的都是ValueAnimator，其实还有其它相关类，比如ObjectAnimator改变透明度：
//ObjectAnimator animator = ObjectAnimator.ofFloat(textview, "alpha", 1f, 0f, 1f);
//animator.setDuration(5000);
//animator.start();
//另外还有ViewPropertyAnimator，用起来更方便，不过只有有限的方法，比如让view在x轴y轴都平衡500：
//textview.animate().x(500).y(500).setDuration(5000)
//.setInterpolator(new BounceInterpolator());
//最后最后，再说一个PropertyValuesHolder，它保存了动画过程中所需要操作的属性和对应的值，
//通常和Keyframe一起使用。像实现一个View抖动动画时，你用上面的需要写很多重复的动画进行串联起来，
//但用Keyframe就可以很好的一次性把动画描述清楚。Keyframe其实就是动画的关键帧。举个抖动的实现例子：
//Keyframe frame0 = Keyframe.ofFloat(0f, 0);
//    Keyframe frame1 = Keyframe.ofFloat(0.1f, -20f);
//    Keyframe frame2 = Keyframe.ofFloat(1, 0);
//    PropertyValuesHolder frameHolder = PropertyValuesHolder.ofKeyframe("rotation",frame0,frame1,frame2);
//    Animator animator = ObjectAnimator.ofPropertyValuesHolder(mImage,frameHolder);
//animator.setDuration(1000);
//        animator.start();

xml：

<?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:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.example.administrator.firsttest.activity.AnimActivity"><com.example.administrator.firsttest.animView.MyViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/myView"/></LinearLayout>

activity：

package com.example.administrator.firsttest.activity;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;import com.example.administrator.firsttest.R;
import com.example.administrator.firsttest.animView.MyView;public class AnimActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_anim);((MyView) findViewById(R.id.myView)).start();}
}

代码中已经有注释了，但是我们还是要去总结一下

动画中的三种动画：

1.补间动画

通过场景里的对象不断做图像变换(平移，缩放，旋转，透明度)从而产生动画效果，是一种渐近式动画，并支持自定义。

2.属性动画

属相动画通过动态地改变对象的属性从而达到动画效果。

3.帧动画

帧动画其实也属于View动画。通过顺序播放一系列图像从而产生动画效果，可以简单理解为图片切换动画效果，但图片过多过大会导致OOM

动画中的插值器

@android:anim/accelerate_interpolator：越来越快

@android:anim/decelerate_interpolator：越来越慢

@android:anim/accelerate_decelerate_interpolator：先快后慢

@android:anim/anticipate_interpolator: 先后退一小步然后向前加速

@android:anim/overshoot_interpolator：快速到达终点超出一小步然后回到终点

@android:anim/anticipate_overshoot_interpolator：到达终点超出一小步然后回到终点

@android:anim/bounce_interpolator：到达终点产生弹球效果，弹几下回到终点

@android:anim/linear_interpolator：均匀速度。

Android 自定义动画view（小变大，旋转，色值）相关推荐

android自定义tab下划线变大,Android开发之设置TabLayout下方下划线的宽度
由于最近项目需要,需要设置tabLayout下方下划线的长度.笔者上网找了半天,也没有找到方法.后来了解到在源码中对tabLayout的下划线进行了设置.并没有方法可以直接设置. 然后,笔者看到了某位 ...
android自定义tab下划线变大,android设置tablayout下划线长度代码
设置tablayout下划线长度的方法(android.support.design.widget.TabLayout) public static void setIndicator(Context ...
CSS3动画产生圆圈由小变大向外扩散的效果
涉及到 CSS3 的动画(animation).2D 转换(transform: scale),具体如代码所示. github: https://github.com/wind-stone/CSS3- ...
Android自定义动画专题一
Android自定义动画在目前的移动端产品中,不管是app还是网页一个好看酷炫的页面总是会第一时间吸引人的眼球,那么对于android开发人员来说,要想实现一个好看的页面必然需要掌握自定义控件以及自 ...
android xml红心圆,用android:clipChildren来实现红心变大特效
最近在看别人技术博客(http://www.cnblogs.com/over140/p/3508335.html)的时候,发现一个属性:android:clipChildren属性. 翻文档找到下面介 ...
android 自定义loading,Android自定义动画-StarLoadingView
今天来分享第二个自定义loading的动画,起了个名字叫蹦跶的星星 ,还是老规矩先介绍,后上图. 实现效果在最后,GIF有点大,手机流量慎重. 介绍首先声明做这个动画的初衷是为了学习和分享,所以从 ...
Android自定义动画专题二
android自定义动画专题二在上篇文章中给大家介绍了android自定义动画的第一种表现形式:view的绘制:不过这只是一种单纯利用自定义控件绘制的方式去实现:这篇文章会给大家演示如何通过自定义控 ...
Android自定义动画三-SVG动画
Android自定义动画三-SVG动画本篇文章主要是对SVG的一个介绍和使用,以及Android中对SVG的一个支持,从而可以帮助我们在android下很轻松的通过SVG实现一些非常酷炫的动画效果. ...
unity3D-Gear VR字体由小变大效果
我做的是让射线击中一个物体,然后3秒内让字体有小变大的效果. 这个东西的主要思路是让画布由0->0.03f.也可以按这个思路去做其他东西不会的可以下面可以给我留言在这里插入代码片` IEnu ...

Android 自定义动画view（小变大，旋转，色值）

Android 自定义动画view（小变大，旋转，色值）相关推荐

最新文章

热门文章