Android实现的一个点赞动画

摘要

使用Canvas和状态模式实现一个点赞效果

点赞动画效果

关键步骤

1. 获取Bitmap对象和Bitmap对象释放。

创建

1
BitmapFactory.decodeResource(getResources(), R.drawable.encourage_gif_big);

回收

1
2
3
4
5
if(bitmap != null && !bitmap.isRecycled()){   
bitmap.recycle();
bitmap = null;
}
System.gc();

如果图片过大可以压缩

1
2
3
4
5
6
//压缩,用于节省BITMAP内存空间--解决BUG的关键步骤    
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inSampleSize = 2; //这个的值压缩的倍数(2的整数倍),数值越小,压缩率越小,图片越清晰

//返回原图解码之后的bitmap对象
bitmap = BitmapFactory.decodeResource(Context, ResourcesId, opts);

2. 创建画笔,设置画笔。

1
2
3
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
mBitmapPaint.setAlpha(255);

3. canvas绘制Bitmap

1
2
3
4
float scale = 1 - (1f - END_SCALE) / TOTAL_TIME * currentTime;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix, mBitmapPaint);

4. 分析动画状态,分解状态

动画状态

将动画过程分解成几个阶段,然后定义基类(模板方法)

5. 计算各个状态的变化过程,用总时间等分绘制。

1
float scale = 1 - (1f - END_SCALE) / TOTAL_TIME * currentTime;

关键点

  1. 简单自定义View实现

重写onDraw()

  1. 状态模式的使用

分解状态,将复杂问题拆分解决的思路。

代码

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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
package lib.ui.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.os.Build;
import android.os.Handler;
import android.os.Message;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.View;

import com.renxing.xys.R;

/**
* Created by 水寒 on 2018/2/5.
* 点赞效果
*/

public class LikesAnimView extends View{

protected static final int DRAW_GAP_TIME = 50;
private static final int HAND_INVALI = 0x0001;

private Status mStatus;


private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case HAND_INVALI:
postInvalidate();
break;
}
}
};

private Bitmap mLikesBitmap;
private Bitmap mStarsBitmap;
private Paint mBitmapPaint;

private int mWidth;
private int mHeight;


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

public LikesAnimView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}

public LikesAnimView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public LikesAnimView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}

private void init(){
mLikesBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.encourage_gif_big);
mStarsBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.encourage_gif_big_1);
mBitmapPaint = new Paint();
mBitmapPaint.setAntiAlias(true);
mStatus = new EndStatu();
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
}

/**
* 开始动画
*/
public void startAnim(){
mStatus = new LikeToBigStatu();
mHandler.sendEmptyMessage(HAND_INVALI);
}

/**
* 结束动画
*/
public void stopAnim(){
mStatus = new EndStatu();
mHandler.removeMessages(HAND_INVALI);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mStatus.draw(canvas);
}

abstract class Status{

protected static final float SMALL_LIKE_SCALE = 0.7f;

public Status(){
mBitmapPaint.setAlpha(255);
}

abstract void toNext();

abstract void draw(Canvas canvas);

}

class LikeToBigStatu extends Status{

private static final int TOTAL_TIME = 200;
private static final float START_SCALE = SMALL_LIKE_SCALE;

int currentTime = 0;

@Override
void toNext() {
mStatus = new LikeToSmallStatu();
}

@Override
void draw(Canvas canvas) {
float scale = START_SCALE + (1f - START_SCALE) / TOTAL_TIME * currentTime;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix, mBitmapPaint);
mHandler.sendEmptyMessageDelayed(HAND_INVALI, DRAW_GAP_TIME);
currentTime = currentTime + DRAW_GAP_TIME;
if(currentTime >= TOTAL_TIME) toNext();
}
}

class LikeToSmallStatu extends Status{

private static final int TOTAL_TIME = 200;
private static final float END_SCALE = SMALL_LIKE_SCALE;

int currentTime = 0;

@Override
void toNext() {
mStatus = new StarToBigStatu();
}

@Override
void draw(Canvas canvas) {
float scale = 1 - (1f - END_SCALE) / TOTAL_TIME * currentTime;
Matrix matrix = new Matrix();
matrix.postScale(scale, scale, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix, mBitmapPaint);
mHandler.sendEmptyMessageDelayed(HAND_INVALI, DRAW_GAP_TIME);
currentTime = currentTime + DRAW_GAP_TIME;
if(currentTime >= TOTAL_TIME) toNext();
}
}

class StarToBigStatu extends Status{

private static final int TOTAL_TIME = 200;
private static final float START_SCALE = 0.6f;

int currentTime = 0;

@Override
void toNext() {
mStatus = new StarOutStatu();
}

@Override
void draw(Canvas canvas) {
float scale = START_SCALE + (1f - START_SCALE) / TOTAL_TIME * currentTime;
Matrix matrix1 = new Matrix();
matrix1.postScale(scale, scale, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mStarsBitmap, matrix1, mBitmapPaint);
Matrix matrix2 = new Matrix();
matrix2.postScale(SMALL_LIKE_SCALE, SMALL_LIKE_SCALE, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix2, mBitmapPaint);
mHandler.sendEmptyMessageDelayed(HAND_INVALI, DRAW_GAP_TIME);
currentTime = currentTime + DRAW_GAP_TIME;
if(currentTime >= TOTAL_TIME) toNext();
}
}

class StarOutStatu extends Status{

private static final int TOTAL_TIME = 200;
private static final float END_ALPHA = 0f;

int currentTime = 0;

@Override
void toNext() {
mStatus = new LikeOutStatu();
}

@Override
void draw(Canvas canvas) {
float alpha = 255 - (255f - END_ALPHA) / TOTAL_TIME * currentTime;
mBitmapPaint.setAlpha((int)alpha);
Matrix matrix1 = new Matrix();
matrix1.postScale(1, 1);
canvas.drawBitmap(mStarsBitmap, matrix1, mBitmapPaint);
Matrix matrix2 = new Matrix();
matrix2.postScale(SMALL_LIKE_SCALE, SMALL_LIKE_SCALE, mWidth / 2, mHeight / 2);
mBitmapPaint.setAlpha(255);
canvas.drawBitmap(mLikesBitmap, matrix2, mBitmapPaint);
mHandler.sendEmptyMessageDelayed(HAND_INVALI, DRAW_GAP_TIME);
currentTime = currentTime + DRAW_GAP_TIME;
if(currentTime >= TOTAL_TIME) toNext();
}
}

class LikeOutStatu extends Status{

private static final int TOTAL_TIME = 200;
private static final float END_ALPHA = 0f;

int currentTime = 0;

@Override
void toNext() {
mStatus = new EndStatu();
}

@Override
void draw(Canvas canvas) {
float alpha = 255 - (255f - END_ALPHA) / TOTAL_TIME * currentTime;
mBitmapPaint.setAlpha((int)alpha);
Matrix matrix = new Matrix();
matrix.postScale(SMALL_LIKE_SCALE, SMALL_LIKE_SCALE, mWidth / 2, mHeight / 2);
canvas.drawBitmap(mLikesBitmap, matrix, mBitmapPaint);
mHandler.sendEmptyMessageDelayed(HAND_INVALI, DRAW_GAP_TIME);
currentTime = currentTime + DRAW_GAP_TIME;
if(currentTime >= TOTAL_TIME) toNext();
}
}

class EndStatu extends Status{

@Override
void toNext() {

}

@Override
void draw(Canvas canvas) {

}
}
}

代码中注释比较少,但是整个结构脉络很清晰,将动画非为好几个阶段去重写draw()方法实现具体绘制,toNext()方法实现交接(状态交接),demo虽然小,但是这种思路可以完成一个更为复杂的动画绘制过程。

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage Element Error Exception Extensions File FileProvider Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code ValueAnimator ViewPropertyAnimator Web Web前端 Workbench api apk bookmark by关键字 compileOnly css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指针 插件 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 源码 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×