-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-09-27
来源 ：原文链接：https://blog.csdn.net/qq_42761395/article/det
阅读 4895
评论 0
摘要：本篇主要介绍了Android开发--Android自定义view之围棋动画（化繁为简），通过具体的内容展现，希望对Android开发的学习有一定的帮助。
本篇主要介绍了Android开发--Android自定义view之围棋动画（化繁为简），通过具体的内容展现，希望对Android开发的学习有一定的帮助。
前言
在之前文章中实现了简单的动态效果，往期文章：Android自定义view之利用drawArc方法实现动态效果
假设这是一种动画的类型，那么能否像Android中的动画一样多个效果结合显示呢，这篇文章将以两个例子来进行拓展。第二个例子为围棋动画的精简版
一、上篇文章的实现
mSweep += SWEEP_INC;
if (mSweep > 360) {
mSweep -= 360;
}
//刷新View
invalidate();
二、第一个拓展（未优化）
效果：
思路：
1.在简单的实现中，仅借助了一个值来重复的循环得以实现动态的效果。而大多情况下动画是只显示一次的。而只让动效实现一次很简单：如下。
if (mSweep > 360) {
//mSweep -= 360;
}
如上，不将修改后的值复原即可。
这个效果的实现关键是将添加一个实心的样式画笔
mPaint1.setStyle(Paint.Style.FILL);
2.为了达到动画只执行一次的效果，需要借助一个布尔值。
private boolean viewContinue=true;
而逻辑代码也就变成了
if (viewContinue==true){
mSweep += SWEEP_INC;
if (mSweep > 360) {
mSweep1 += SWEEP_INC;
if (mSweep1>360){
viewContinue=false;
}
}
//刷新View
invalidate();
}
案例拓展：
可提供给用户一个方法使动画再执行一次，只需将mSweep，mSweep1改为0，并将viewContinue值改为true即可。
可放在数组中，进行多个效果的迭代。
此案例源码
public class MySampleView extends View {
private int mWidth;
private int mHeight;
private int useWidth, minwidth;
private Paint mPaint,mPaint1;
private Paint mFramePaint;
private RectF mBigOval;
private float mStart;
private float mSweep ,mSweep1;
private boolean viewContinue=true;
private static final float SWEEP_INC = 2;
public MySampleView(Context context) {
super(context);
}
public MySampleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
private void init() {
initPaint();
}
private void initPaint() {
//初始化
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(0x88FF0000);
mPaint.setStrokeWidth(4);
mPaint1 = new Paint();
mPaint1.setAntiAlias(true);
mPaint1.setStyle(Paint.Style.FILL);
mPaint1.setColor(0x88FF0000);
//初始化
mFramePaint = new Paint();
mFramePaint.setAntiAlias(true);
mFramePaint.setStyle(Paint.Style.STROKE);
mFramePaint.setStrokeWidth(0);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
useWidth = mWidth;
if (mWidth > mHeight) {
useWidth = mHeight;
}
}
@Override
protected void onDraw(Canvas canvas) {
init();
//定义一个最小标识
minwidth = useWidth / 10;
mBigOval = new RectF(minwidth, minwidth, minwidth*9, minwidth*9);
//绘制背景
canvas.drawColor(Color.WHITE);
canvas.drawRect(mBigOval, mFramePaint);
canvas.drawArc(mBigOval, mStart, mSweep, true, mPaint);
canvas.drawArc(mBigOval, mStart, mSweep1, true, mPaint1);
if (viewContinue==true){
mSweep += SWEEP_INC;
if (mSweep > 360) {
mSweep1 += SWEEP_INC;
if (mSweep1>360){
viewContinue=false;
}
}
//刷新View
invalidate();
}
}
}
三、第二个案例（本文重点）
效果
之前文章写得那么复杂是为了介绍一些Android自定义view的一些知识，而其实实现类似的效果极其的简单，那么直接开始。
1.先实现一个球的直线运动
效果：
思路：
借助一个偏移量改变绘制的小球位置。
代码：
displacement为偏移量
mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
//绘制背景
canvas.drawColor(Color.WHITE);
//canvas.drawRect(mBigOval, mFramePaint);
canvas.drawArc(mBigOval, 0, 360, false, mPaint);
if (viewContinue){
displacement += SWEEP_INC;
if (displacement > minwidth*7) {
viewContinue=false;
}
//刷新View
invalidate();
}
2.绘制另一个小球反方向运动
效果：
代码：
mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
mBigOval1 = new RectF(minwidth*8-displacement, minwidth, minwidth*9-displacement, minwidth*2);
//绘制背景
canvas.drawColor(Color.WHITE);
canvas.drawArc(mBigOval, 0, 360, false, mPaint);
canvas.drawArc(mBigOval1, 0, 360, false, mPaint1);
if (viewContinue){
displacement += SWEEP_INC;
if (displacement > minwidth*7) {
viewContinue=false;
}
//刷新View
invalidate();
}
3.改变匀速
根据情况增加displacement的值。如下
if (viewContinue){
displacement += SWEEP_INC;
if (displacement>minwidth*2){
displacement+=2;
}
if (displacement > minwidth*7) {
viewContinue=false;
}
//刷新View
invalidate();
}
4.动画重复执行
效果：
思路：再添加另外的一个标识符，同理，将displacement的值变小。
if (viewContinue){
displacement += SWEEP_INC;
if (displacement>minwidth*2){
displacement+=2;
}
if (displacement > minwidth*7) {
viewContinue=false;
viewContinue1=true;
}
//刷新View
invalidate();
}
if (viewContinue1){
displacement -= SWEEP_INC;
if (displacement<minwidth*5){
displacement-=2;
}
if (displacement<0) {
viewContinue1=false;
viewContinue=true;
}
//刷新View
invalidate();
}
如只需要执行一次来回，在viewContinue1的判断中不将viewContinue的值设为true。
5.源码
public class MySampleView extends View {
private int mWidth;
private int mHeight;
private int useWidth, minwidth;
private Paint mPaint,mPaint1;
private Paint mFramePaint;
private RectF mBigOval,mBigOval1;
private float displacement;
private boolean viewContinue=true,viewContinue1=false;
private static final float SWEEP_INC = 2;
public MySampleView(Context context) {
super(context);
}
public MySampleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
private void init() {
initPaint();
}
private void initPaint() {
//初始化
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(0x88FF0000);
mPaint1 = new Paint();
mPaint1.setAntiAlias(true);
mPaint1.setStyle(Paint.Style.FILL);
mPaint1.setColor(0x88888888);
//初始化
mFramePaint = new Paint();
mFramePaint.setAntiAlias(true);
mFramePaint.setStyle(Paint.Style.STROKE);
mFramePaint.setStrokeWidth(0);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
useWidth = mWidth;
if (mWidth > mHeight) {
useWidth = mHeight;
}
}
@Override
protected void onDraw(Canvas canvas) {
init();
//定义一个最小标识
minwidth = useWidth / 10;
mBigOval = new RectF(minwidth+displacement, minwidth, minwidth*2+displacement, minwidth*2);
mBigOval1 = new RectF(minwidth*8-displacement, minwidth, minwidth*9-displacement, minwidth*2);
//绘制背景
canvas.drawColor(Color.WHITE);
//canvas.drawRect(mBigOval, mFramePaint);
canvas.drawArc(mBigOval, 0, 360, false, mPaint);
canvas.drawArc(mBigOval1, 0, 360, false, mPaint1);
if (viewContinue){
displacement += SWEEP_INC;
if (displacement>minwidth*2){
displacement+=2;
}
if (displacement > minwidth*7) {
viewContinue=false;
viewContinue1=true;
}
//刷新View
invalidate();
}
if (viewContinue1){
displacement -= SWEEP_INC;
if (displacement<minwidth*5){
displacement-=2;
}
if (displacement<0) {
viewContinue1=false;
viewContinue=true;
}
//刷新View
invalidate();
}
}
}
四、总结
通过第二个案例实现，应该能够拓展开大家的思路，实现更加好的动态效果。
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 1
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
