Android实现旋转动画的两种方式案例详解

原文

练习案例

视差动画 - 雅虎新闻摘要加载

效果展示

前期准备

第一步：准备好颜色数组 res => values => colors.xml

 <color name="orange">#FF9600</color>
    <color name="aqua">#02D1AC</color>
    <color name="yellow">#FFD200</color>
    <color name="bule">#00C6FF</color>
    <color name="green">#00E099</color>
    <color name="pink">#FF3891</color>
 
    <array name="splash_circle_colors">
        <item>@color/orange</item>
        <item>@color/aqua</item>
        <item>@color/yellow</item>
        <item>@color/bule</item>
        <item>@color/green</item>
        <item>@color/pink</item>
    </array>

自定义 View java代码编写

方法一

关键思想： 属性动画 计算圆心

package com.wust.mydialog;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
 
import androidx.annotation.Nullable;
 
 
/**
 * ClassName: com.wust.mydialog.MyRotateView <br/>
 * Description: <br/>
 * date: 2021/8/7 12:13<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 * @微信 yiqiideallife
 * @技术交流QQ群 928023749
 */
public class MyRotateView extends View {
 
    //设置旋转间隔时间
    private int SPLASH_CIRCLE_ROTATE_TIME = 3000;
    //设置中心圆半径
    private float CENTER_CIRCLE_RADIUS;
    private float SMALL_CIRCLE_RADIUS;
    private float mCurrentSingle = 0f;
    private int[] mColorArray;
    private Paint mCirclePaint;
    private ValueAnimator va;
 
    public MyRotateView(Context context) {
        super(context);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
 
        //初始化参数
        initParams(width,height);
 
        setMeasuredDimension(width,height);
    }
 
    private void initParams(int w, int h) {
        //设置中心圆半径
        CENTER_CIRCLE_RADIUS = 1/4.0f * w;
        //设置小圆的半径
        SMALL_CIRCLE_RADIUS = 1/25.0f * w;
        //获取小球颜色
        mColorArray = getResources().getIntArray(R.array.splash_circle_colors);
        //初始化画笔
        mCirclePaint = new Paint();
        mCirclePaint.setDither(true);
        mCirclePaint.setAntiAlias(true);
 
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆
        drawSplashCircle(canvas);
    }
 
    private void drawSplashCircle(Canvas canvas) {
        //设置属性动画，让小圆转起来
        //这里得注意，是个坑，你如果不判断那球就不会动 因为会陷入死循环 值动画将值设置为0 -> invalidate()重绘 -> 执行draw 又将值设为0
        if (va == null){
            va = ObjectAnimator.ofFloat(0f, 2 * (float) Math.PI);
            va.setDuration(SPLASH_CIRCLE_ROTATE_TIME);
            va.setRepeatCount(ValueAnimator.INFINITE);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurrentSingle = (float) animation.getAnimatedValue();
//                    System.out.println("mCurrentSingle ->"   mCurrentSingle);
                    invalidate();
                }
            });
            va.setInterpolator(new LinearInterpolator());
            va.start();
        }
 
        //计算每个小球的间隔
        double spaceAngle = Math.PI*2/mColorArray.length;
 
        for (int i = 0; i < mColorArray.length; i  ) {
            //为 每个球 画笔 设置颜色
            mCirclePaint.setColor(mColorArray[i]);
 
            //利用 勾股定理 计算 小圆 中心点
            float cx = getWidth()/2   (float) (CENTER_CIRCLE_RADIUS*Math.cos(spaceAngle*i mCurrentSingle));
            float cy = getHeight()/2   (float) (CENTER_CIRCLE_RADIUS*Math.sin(spaceAngle*i mCurrentSingle));
 
            canvas.drawCircle(cx,cy,SMALL_CIRCLE_RADIUS,mCirclePaint);
        }
    }
}

方法二

关键思想：旋转画布法

package com.wust.mydialog;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
 
import androidx.annotation.Nullable;
 
 
/**
 * ClassName: com.wust.mydialog.MyRotateView <br/>
 * Description: <br/>
 * date: 2021/8/7 12:13<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 * @微信 yiqiideallife
 * @技术交流QQ群 928023749
 */
public class MyRotateView extends View {
 
    //设置旋转间隔时间
    private int SPLASH_CIRCLE_ROTATE_TIME = 3000;
    //设置中心圆半径
    private float CENTER_CIRCLE_RADIUS;
    private float SMALL_CIRCLE_RADIUS;
    private float mCurrentSingle = 0f;
    private int[] mColorArray;
    private Paint mCirclePaint;
    private ValueAnimator va;
 
    public MyRotateView(Context context) {
        super(context);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
 
        //初始化参数
        initParams(width,height);
 
        setMeasuredDimension(width,height);
    }
 
    private void initParams(int w, int h) {
        //设置中心圆半径
        CENTER_CIRCLE_RADIUS = 1/4.0f * w;
        //设置小圆的半径
        SMALL_CIRCLE_RADIUS = 1/25.0f * w;
        //获取小球颜色
        mColorArray = getResources().getIntArray(R.array.splash_circle_colors);
        //初始化画笔
        mCirclePaint = new Paint();
        mCirclePaint.setDither(true);
        mCirclePaint.setAntiAlias(true);
 
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆
        drawSplashCircle(canvas);
    }
 
    private void drawSplashCircle(Canvas canvas) {
        //设置属性动画，让小圆转起来
        //这里得注意，是个坑，你如果不判断那球就不会动 因为会陷入死循环 值动画将值设置为0 -> invalidate()重绘 -> 执行draw 又将值设为0
        if (va == null){
//            va = ObjectAnimator.ofFloat(0f, 2 * (float) Math.PI);
            va = ObjectAnimator.ofFloat(0f, 360.0f);
            va.setDuration(SPLASH_CIRCLE_ROTATE_TIME);
            va.setRepeatCount(ValueAnimator.INFINITE);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurrentSingle = (float) animation.getAnimatedValue();
//                    System.out.println("mCurrentSingle ->"   mCurrentSingle);
                    invalidate();
                }
            });
            va.setInterpolator(new LinearInterpolator());
            va.start();
        }
 
        //计算每个小球的间隔
//        double spaceAngle = Math.PI*2/mColorArray.length;
        double spaceAngle = 360.0d/mColorArray.length;
        System.out.println("spaceAngle -> "   spaceAngle);
 
        //利用旋转画布法
        canvas.save();
        canvas.rotate(mCurrentSingle,getWidth()/2,getHeight()/2);
        for (int i = 0; i < mColorArray.length; i  ) {
            canvas.rotate((float) spaceAngle,getWidth()/2,getHeight()/2);
            //为 每个球 画笔 设置颜色
            mCirclePaint.setColor(mColorArray[i]);
 
            //利用 勾股定理 计算 小圆 中心点
            //float cx = getWidth()/2   (float) (CENTER_CIRCLE_RADIUS*Math.cos(spaceAngle*i mCurrentSingle));
            //float cy = getHeight()/2   (float) (CENTER_CIRCLE_RADIUS*Math.sin(spaceAngle*i mCurrentSingle));
 
            //利用旋转画布法
            float cx = getWidth()/2   CENTER_CIRCLE_RADIUS;
            float cy = getHeight()/2;
 
            canvas.drawCircle(cx,cy,SMALL_CIRCLE_RADIUS,mCirclePaint);
        }
        canvas.restore();
    }
}

易错点总结：

1、canvas.rotate(mCurrentSingle,getWidth()/2,getHeight()/2);中 第一个参数传的是角度（360度的那种），而 Math.cos();中 参数传的是一个弧度（2π的那种）

2、canvas.rotate() 函数执行之后对后续画布上的操作都是有影响的，所以，得配合 canvas.save();和 canvas.restore();使用。因此，里面的canvas.rotate((float) spaceAngle,getWidth()/2,getHeight()/2);中spaceAngle不能乘 i 。

3、画布的旋转除了 canvas.rotate() 函数 可以实现外，还可以利用矩阵。代码如下：

//创建矩阵
private Matrix mSpaceMatrix;
//初始化旋转矩阵
mSpaceMatrix = new Matrix();
//初始化旋转矩阵
mSpaceMatrix.reset();
mSpaceMatrix.postRotate((float) spaceAngle,getWidth()/2,getHeight()/2);
//画布旋转角度
canvas.concat(mSpaceMatrix);

完整代码

package com.wust.mydialog;
 
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
 
import androidx.annotation.Nullable;
 
 
/**
 * ClassName: com.wust.mydialog.MyRotateView <br/>
 * Description: <br/>
 * date: 2021/8/7 12:13<br/>
 *
 * @author yiqi<br />
 * @QQ 1820762465
 * @微信 yiqiideallife
 * @技术交流QQ群 928023749
 */
public class MyRotateView extends View {
 
    //设置旋转间隔时间
    private int SPLASH_CIRCLE_ROTATE_TIME = 3000;
    //设置中心圆半径
    private float CENTER_CIRCLE_RADIUS;
    private float SMALL_CIRCLE_RADIUS;
    private float mCurrentSingle = 0f;
    private int[] mColorArray;
    private Paint mCirclePaint;
    private ValueAnimator va;
    private Matrix mSpaceMatrix;
 
    public MyRotateView(Context context) {
        super(context);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
 
    public MyRotateView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
 
        //初始化参数
        initParams(width,height);
 
        setMeasuredDimension(width,height);
    }
 
    private void initParams(int w, int h) {
        //设置中心圆半径
        CENTER_CIRCLE_RADIUS = 1/4.0f * w;
        //设置小圆的半径
        SMALL_CIRCLE_RADIUS = 1/25.0f * w;
        //获取小球颜色
        mColorArray = getResources().getIntArray(R.array.splash_circle_colors);
        //初始化画笔
        mCirclePaint = new Paint();
        mCirclePaint.setDither(true);
        mCirclePaint.setAntiAlias(true);
        //初始化旋转矩阵
        mSpaceMatrix = new Matrix();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制圆
        drawSplashCircle(canvas);
    }
 
    private void drawSplashCircle(Canvas canvas) {
        //设置属性动画，让小圆转起来
        //这里得注意，是个坑，你如果不判断那球就不会动 因为会陷入死循环 值动画将值设置为0 -> invalidate()重绘 -> 执行draw 又将值设为0
        if (va == null){
//            va = ObjectAnimator.ofFloat(0f, 2 * (float) Math.PI);
            va = ObjectAnimator.ofFloat(0f, 360.0f);
            va.setDuration(SPLASH_CIRCLE_ROTATE_TIME);
            va.setRepeatCount(ValueAnimator.INFINITE);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurrentSingle = (float) animation.getAnimatedValue();
//                    System.out.println("mCurrentSingle ->"   mCurrentSingle);
                    invalidate();
                }
            });
            va.setInterpolator(new LinearInterpolator());
            va.start();
        }
 
        //计算每个小球的间隔
//        double spaceAngle = Math.PI*2/mColorArray.length;
        double spaceAngle = 360.0d/mColorArray.length;
        //初始化旋转矩阵
        mSpaceMatrix.reset();
        mSpaceMatrix.postRotate((float) spaceAngle,getWidth()/2,getHeight()/2);
 
 
        //利用旋转画布法
        canvas.save();
        canvas.rotate(mCurrentSingle,getWidth()/2,getHeight()/2);
        for (int i = 0; i < mColorArray.length; i  ) {
//            canvas.rotate((float) spaceAngle,getWidth()/2,getHeight()/2);
//        System.out.println("spaceAngle -> "   spaceAngle);
            canvas.concat(mSpaceMatrix);
            //为 每个球 画笔 设置颜色
            mCirclePaint.setColor(mColorArray[i]);
 
            //利用 勾股定理 计算 小圆 中心点
            //float cx = getWidth()/2   (float) (CENTER_CIRCLE_RADIUS*Math.cos(spaceAngle*i mCurrentSingle));
            //float cy = getHeight()/2   (float) (CENTER_CIRCLE_RADIUS*Math.sin(spaceAngle*i mCurrentSingle));
 
            //利用旋转画布法
            float cx = getWidth()/2   CENTER_CIRCLE_RADIUS;
            float cy = getHeight()/2;
 
            canvas.drawCircle(cx,cy,SMALL_CIRCLE_RADIUS,mCirclePaint);
        }
        canvas.restore();
    }
}

注意事项：

1、canvas.concat(mSpaceMatrix);对画布的操作也会对后面进行影响

2、Android中Matrix的set、pre、post的区别

说set、pre、post的区别之前，先说说Matrix。

Matrix包含一个3 X 3的矩阵，专门用于图像变换匹配。

Matrix提供了四种操作：

  • translate(平移)
  • rotate(旋转)
  • scale(缩放)
  • skew(倾斜)

也就是说这4种操作都是对这个3 X 3的矩阵设值来达到变换的效果。

Matrix没有结构体，它必须被初始化，通过reset或set方法。

OK，Matrix介绍完了，我们来看看set、pre、post的区别。

pre是在队列最前面插入，post是在队列最后面追加，而set先清空队列在添加（这也是上文提到的“Matrix没有结构体，它必须被初始化，通过reset或set方法”的原因）。

下面通过一些例子具体说明：

  1. matrix.preScale(2f,1f);   
  2. matrix.preTranslate(5f, 0f);  
  3. matrix.postScale(0.2f, 1f);   
  4. matrix.postTranslate(0.5f, 0f); 

执行顺序：translate(5, 0) -> scale(2f, 1f) -> scale(0.2f, 1f) -> translate(0.5f, 0f)

  1. matrix.postTranslate(2f, 0f);  
  2. matrix.preScale(0.2f, 1f);    
  3. matrix.setScale(1f, 1f);  
  4. matrix.postScale(5f, 1f);  
  5. matrix.preTranslate(0.5f, 0f);  

执行顺序：translate(0.5f, 0f) -> scale(1f, 1f) -> scale(5f, 1)

到此这篇关于Android实现旋转动画的两种方式的文章就介绍到这了,更多相关android旋转动画内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！

Android实现旋转动画的两种方式案例详解的更多相关文章

  1. Canvas实现贝赛尔曲线轨迹动画的示例代码

    这篇文章主要介绍了Canvas实现贝赛尔曲线轨迹动画的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  2. HTML5 直播疯狂点赞动画实现代码 附源码

    为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞动作通常无限次，引导用户疯狂点赞，今天小编给大家分享HTML5 直播疯狂点赞动画实现代码 附源码，感兴趣的朋友一起看看吧

  3. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下

  4. 基于canvas的骨骼动画的示例代码

    这篇文章主要介绍了基于canvas的骨骼动画的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  5. html5如何在Canvas中实现自定义路径动画示例

    本篇文章主要介绍了html5如何在Canvas中实现自定义路径动画示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  6. html5 canvas合成海报所遇问题及解决方案总结

    这篇文章主要介绍了html5 canvas合成海报所遇问题及解决方案总结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  7. 基于HTML5+Webkit实现树叶飘落动画

    本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果，需要的朋友参考下吧

  8. Html5页面内使用JSON动画的实现

    这篇文章主要介绍了Html5页面内使用JSON动画的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  9. html5实现图片转圈的动画效果——让页面动起来

    这篇文章主要介绍了html5实现图片转圈的动画效果——让页面动起来的相关资料,需要的朋友可以参考下

  10. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. Flutter 网络请求框架封装详解

    这篇文章主要介绍了Flutter 网络请求框架封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  2. Android单选按钮RadioButton的使用详解

    今天小编就为大家分享一篇关于Android单选按钮RadioButton的使用详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧

  3. 解决android studio 打包发现generate signed apk 消失不见问题

    这篇文章主要介绍了解决android studio 打包发现generate signed apk 消失不见问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

  4. Android 实现自定义圆形listview功能的实例代码

    这篇文章主要介绍了Android 实现自定义圆形listview功能的实例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  5. 详解Android studio 动态fragment的用法

    这篇文章主要介绍了Android studio 动态fragment的用法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  6. Android用RecyclerView实现图标拖拽排序以及增删管理

    这篇文章主要介绍了Android用RecyclerView实现图标拖拽排序以及增删管理的方法，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下

  7. Android notifyDataSetChanged() 动态更新ListView案例详解

    这篇文章主要介绍了Android notifyDataSetChanged() 动态更新ListView案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下

  8. Android自定义View实现弹幕效果

    这篇文章主要为大家详细介绍了Android自定义View实现弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  9. Android自定义View实现跟随手指移动

    这篇文章主要为大家详细介绍了Android自定义View实现跟随手指移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. Android实现多点触摸操作

    这篇文章主要介绍了Android实现多点触摸操作，实现图片的放大、缩小和旋转等处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

返回
顶部