1. 首页
  2. 文章中心
  3. Android

Android实现雅虎新闻摘要加载视差动画效果

190 阅读 0 评论
我是靠谱客的博主 粗犷摩托，这篇文章主要介绍Android实现雅虎新闻摘要加载视差动画效果，现在分享给大家，希望可以做个参考。

基础知识

继 Android实现旋转动画的两种方式 我们了解了 Android实现旋转的两种基本方法之后，我们来写一个综合案例

效果展示

代码实现 

实现思路

从效果中我们可以看到 可以将其分为三个动画：

1、旋转动画（Android实现旋转动画的两种方式）

2、聚合动画

3、扩展动画

代码展示

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
package com.wust.mydialog;
 
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AnticipateInterpolator;
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 = 1000;
    //设置中心圆半径
    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;
 
    private LoadingState mLoadingState;
    //当前中心圆半径
    private float mCurCenterRadius;
    private float mDiagonal;
    private float mLineWidth;
 
    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);
        
        if (mLoadingState == null) {
            mLoadingState = new RotateState();
        }
        mLoadingState.onDraw(canvas);
    }
 
    //定义 状态 抽象类
    private abstract class LoadingState {
        public abstract void onDraw(Canvas canvas);
    }
 
    //旋转动画
    private class RotateState extends LoadingState {
 
        public RotateState() {
            //计算每个小球的间隔
            double spaceAngle = 360.0d / mColorArray.length;
            //初始化旋转矩阵
            mSpaceMatrix.reset();
            mSpaceMatrix.postRotate((float) spaceAngle, getWidth() / 2, getHeight() / 2);
 
            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();
                    invalidate();
                }
            });
            va.setInterpolator(new LinearInterpolator());
            va.start();
        }
 
        @Override
        public void onDraw(Canvas canvas) {
            //绘制背景
            canvas.drawColor(Color.WHITE);
            //利用旋转画布法
            canvas.save();
            canvas.rotate(mCurrentSingle, getWidth() / 2, getHeight() / 2);
            for (int i = 0; i < mColorArray.length; i++) {
                canvas.concat(mSpaceMatrix);
                //为 每个球 画笔 设置颜色
                mCirclePaint.setColor(mColorArray[i]);
                //利用旋转画布法
                float cx = getWidth() / 2 + CENTER_CIRCLE_RADIUS;
                float cy = getHeight() / 2;
 
                canvas.drawCircle(cx, cy, SMALL_CIRCLE_RADIUS, mCirclePaint);
            }
            canvas.restore();
        }
    }
 
    //聚合动画
    private class ScaleState extends LoadingState {
 
        public ScaleState() {
            va = ObjectAnimator.ofFloat(CENTER_CIRCLE_RADIUS,0);
            va.setDuration(SPLASH_CIRCLE_ROTATE_TIME);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mCurCenterRadius = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            va.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mLoadingState = new ExtentState();
                }
            });
            va.setInterpolator(new AnticipateInterpolator());
            va.start();
        }
 
        @Override
        public void onDraw(Canvas canvas) {
            //绘制背景
            canvas.drawColor(Color.WHITE);
            //绘制小圆
            canvas.save();
            //这句话也不能调，要不然不连贯
            canvas.rotate(mCurrentSingle,getWidth()/2,getHeight()/2);
            for (int i = 0; i < mColorArray.length; i++) {
                mCirclePaint.setColor(mColorArray[i]);
                canvas.concat(mSpaceMatrix);
                canvas.drawCircle(mCurCenterRadius+getWidth()/2,getHeight()/2,SMALL_CIRCLE_RADIUS,mCirclePaint);
            }
            canvas.restore();
        }
    }
 
    //扩展动画
    public class ExtentState extends LoadingState{
 
        public ExtentState() {
            //初始化对角线
            float cx = getWidth()/2.0f;
            float cy = getHeight()/2.0f;
            mDiagonal = (float) Math.sqrt(Math.pow(cx,2)+Math.pow(cy,2));
 
            va = ObjectAnimator.ofFloat(mDiagonal,0);
            va.setDuration(3000);
            va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    mLineWidth = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
            va.setInterpolator(new LinearInterpolator());
            va.start();
        }
 
        @Override
        public void onDraw(Canvas canvas) {
            mCirclePaint.setColor(Color.WHITE);
            mCirclePaint.setStrokeWidth(mLineWidth*2);//元的半径只会到达线宽的中间，所以要乘2
            mCirclePaint.setStyle(Paint.Style.STROKE);
            canvas.drawCircle(getWidth()/2,getHeight()/2,mDiagonal,mCirclePaint);
        }
    }
 
    public void dismiss() {
        if (mLoadingState instanceof RotateState){
            //取消旋转值动画
            va.cancel();
            //创建缩放动画
            mLoadingState = new ScaleState();
            //刷新布局、可以写也可以不写
//            invalidate();
        }
    }
}

到此这篇关于Android实现雅虎新闻摘要加载视差动画效果的文章就介绍到这了,更多相关android视觉动画内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！

最后

以上就是粗犷摩托最近收集整理的关于Android实现雅虎新闻摘要加载视差动画效果的全部内容，更多相关Android实现雅虎新闻摘要加载视差动画效果内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(126)

相关文章

Android实现微信登录的示例代码
Android实现微信登录的示例代码
Android中ScrollView监听滑动距离案例讲解
Android中ScrollView监听滑动距离案例讲解
Android仿字节颜色自定义进度条
Android仿字节颜色自定义进度条
Android实现旋转动画的两种方式案例详解
Android实现旋转动画的两种方式案例详解
Android实现雅虎新闻摘要加载视差动画效果
Android实现雅虎新闻摘要加载视差动画效果
多面分析HarmonyOS与Android的特点
多面分析HarmonyOS与Android的特点
Android振动器使用方法详解
Android振动器使用方法详解
Android如何实现翻转动画效果（卡片翻转）
Android如何实现翻转动画效果（卡片翻转）

评论列表共有 0 条评论

立即
投稿
返回
顶部