当自定义View的时候,可以利用Canvas给View添加一些动画效果。

下面的例子,是在屏幕上绘制一个红色的小方块,这个小方块会在屏幕上面“乱跳”。

知识点

使用到的知识点:

(1) 在View的子类的draw()中调用invalidate(),可以让View对象一直保持重绘状态,从而可以使Canvas一直处于绘画过程中。

(2) Canvas的绘制功能,例如绘制Rect、Circle、Path等。

(3) 小方块碰撞屏幕边缘的算法。

实现

小方块视图。

继承View类,重写onDraw()方法,并提供一些setter和getter方法,用于设置小方块的属性。判断碰撞事件的逻辑在moveTo()方法中。代码如下:

 public class Rectangle extends View {
public static final int MAX_SIZE = 40;
private static final int ALPHA = 255;
private int mCoordX = 0;
private int mCoordY = 0;
private int mRealSize = 40;
private int mSpeedX = 3;
private int mSpeedY = 3; private boolean goRight = true;
private boolean goDown = true;
private DrawView mDrawView; private Paint mInnerPaint;
private RectF mDrawRect; public Rectangle(Context context, DrawView drawView) {
super(context);
mDrawView = drawView; mInnerPaint = new Paint(); mDrawRect = new RectF(); /* Red is default */
mInnerPaint.setARGB(ALPHA, 255, 0, 0);
mInnerPaint.setAntiAlias(true);
} public void setARGB(int a, int r, int g, int b) {
mInnerPaint.setARGB(a, r, g, b);
} public void setX(int newValue) {
mCoordX = newValue;
} public float getX() {
return mCoordX;
} public void setY(int newValue) {
mCoordY = newValue;
} public float getY() {
return mCoordY;
} public void move() {
moveTo(mSpeedX, mSpeedY);
} private void moveTo(int goX, int goY) { // check the borders, and set the direction if a border has reached
if (mCoordX > (mDrawView.width - MAX_SIZE)) {
goRight = false;
} if (mCoordX < 0) {
goRight = true;
} if (mCoordY > (mDrawView.height - MAX_SIZE)) {
goDown = false;
}
if (mCoordY < 0) {
goDown = true;
} // move the x and y
if (goRight) {
mCoordX += goX;
} else {
mCoordX -= goX;
}
if (goDown) {
mCoordY += goY;
} else {
mCoordY -= goY;
} } public int getSpeedX() {
return mSpeedX;
} public void setSpeedX(int speedX) {
mSpeedX = speedX;
} public int getmSpeedY() {
return mSpeedY;
} public void setSpeedY(int speedY) {
mSpeedY = speedY;
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); mDrawRect.set(mCoordX, mCoordY, mCoordX + mRealSize, mCoordY
+ mRealSize);
canvas.drawRoundRect(mDrawRect, 0, 0, mInnerPaint); } public void setSize(int newSize) {
mRealSize = newSize;
} public int getSize() {
return mRealSize;
}
}

外层视图。

小方块是一个独立的视图,这里不直接把小方块显示在Actiity中,在它的外面又“包”了一层。代码如下:

 public class DrawView extends View {
private Rectangle mRectangle; public int width; public int height; public DrawView(Context context) {
super(context);
mRectangle = new Rectangle(context, this);
mRectangle.setARGB(255, 255, 0, 0);
mRectangle.setSpeedX(3);
mRectangle.setSpeedY(3); } @SuppressLint("WrongCall")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
invalidate(); mRectangle.move();
mRectangle.onDraw(canvas); } }

主界面。

获取屏幕的尺寸,并把相应的尺寸赋值给DrawView对象。最后,显示DrawView对象。代码如下:

 public class MainActivity extends Activity {

     private DrawView mDrawView;

     @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); Display display = getWindowManager().getDefaultDisplay();
mDrawView = new DrawView(this);
mDrawView.height = display.getHeight();
mDrawView.width = display.getWidth();
setContentView(mDrawView);
} }

源码下载:

HackSeven Canvas上的动画的更多相关文章

  1. HTML5 Canvas核心技术图形动画与游戏开发(读书笔记)----第一章,基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  2. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  3. Android中使用SurfaceView和Canvas来绘制动画

    事实上每一个View中都有Canvas能够用来绘制动画.仅仅须要在这个View中重载onDraw()方法就能够,可是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做&quo ...

  4. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  5. 7个华丽的基于Canvas的HTML5动画

    说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

  6. 用HTML和CSS实现WWDC 2015上的动画效果

    用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...

  7. 【自己给自己题目做】:如何在Canvas上实现魔方效果

    最终demo -> 3d魔方 体验方法: 浮动鼠标找到合适的位置,按空格键暂停 选择要翻转的3*3模块,找到相邻两个正方体,鼠标点击第一个正方体,并且一直保持鼠标按下的状态直到移到第二个正方体后 ...

  8. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  9. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

随机推荐

  1. Source Insight中文字体设置

    Source Insight是一个面向项目开发的程序编辑器和代码阅读工具,它拥有内置的对C/C++, C#和Java等程序的分析,分析你的源代 码并在你工作的同时动态维护它自己的符号数据库,并自动为你 ...

  2. 「自己开发直播」rtmp-nginx-module实现直播状态、观看人数控制

    这是自己搭建直播服务器.开发直播平台系列的文章,前面两篇文章分别为: 通过Nginx-rtmp-module搭建直播服务器并实现直播 实现nginx-rtmp-module多频道输入输出与权限控制 这 ...

  3. The java.util.concurrent Synchronizer Framework笔记

    这篇笔记是关于 Doug Lea 的 The java.util.concurrent Synchronizer Framework . 原文地址:http://gee.cs.oswego.edu/d ...

  4. 011. Python中*args, **kwargs 和 pass 和self 解释

    *args, **kwargs →在python都表示可变参数, *args表示任意多个任意类型无名参数, 是一个元组; **kwargs表示关键字参数(key/value参数), 是一个字典,接收的 ...

  5. c# 各种tips

    1.lock 类似于 java中的synchronized,对对象或代码块加上互斥锁. 2.c#中的lambda表达式, ForEach(x => f(n)) 3.c# 中的 something ...

  6. Java的I/O流问题

    一.流的概念        流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等.        ...

  7. 黑客工具包ShadowBrokers浅析

    臭名昭著的方程式组织工具包再次被公开,TheShadowBrokers 在 steemit.com博客上提供了相关消息. 本次被公开的工具包大小为117.9MB,包含23 个黑客工具,其中部分文件显示 ...

  8. 「小程序JAVA实战」 小程序wxss样式文件的使用(七)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-07/ 细说下微信小程序的wxss样式文件.源码:https://github.com/liming ...

  9. Mycat实战之日志分析

    环境搭建参见之前发的一篇:http://www.cnblogs.com/chinesern/p/7667106.html 1修改log4j.xml 配置增加其他级别调试以及验证是否自动加载 cat / ...

  10. 虚拟机之 搭建discuz论坛

    1.下载 mkdir /data/www cd !$ wget http://download.comsenz.com/DiscuzX/3.2/Discuz_X3.2_SC_GBK.zip 2.解压 ...