移动编程技术课件 第10章 绘图与动画

10.3 Tween动画
• 10.3.1.3 在xml中设置移动动画translate
<translate android:fromXDelta="0" android:toXDelta="180" android:fromYDelta="0" android:toYDelta="200" android:duration="3000"/>
10.1 绘图
• 10.1.1 View
– View类是Android的一个超类，这个类几乎包含了所有 的屏幕控件。
– 每一个View都有一个用于绘图的画布，这个画布可以 进行任意扩展。
– 在Android中，可以自定义View---任何一个View类都只 需重写onDraw方法就可以实现自定义界面显示，自定 义的视图可以是复杂的3D实现，也可以是非常简单的 文本形式等。
正常状态
拖动中
10.1 绘图
• 附:Android中画弧线
– public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
• oval :指定圆弧的外轮廓矩形区域。 • startAngle: 圆弧起始角度，单位为度。 • sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。 • useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，
10.3 Tween动画
• 10.3.1 在XML文件中定义动画,然后用代码显示：
– 先在res文件夹中新建anim文件夹，再在其中建立 xml文件， xml文件中定义动画相关属性
• 动画文件内容：
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="/apk/res/android" >
– fromDegrees 属性为动画起始时的角度 – toDegrees 属性为动画结束时旋转的角度，可取负
值，可以大于360度 – pivotX和pivotY是旋转轴心坐标，坐标的表示规则
同前所述。
10.3 Tween动画
• 10.3.1.6 在xml文件中设置缩放动画scale
<scale android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale=“1.4" android:pivotX="50%p" android:pivotY="0" android:duration="3000" />
的宽度/高度
10.3 Tween动画
• 10.3.1.5 在xml文件中设置旋转动画rotate
<rotate android:fromDegrees="0" android:toDegrees="+360" android:pivotX="50%p" android:pivotY="0" android:duration="3000" />
通常用来绘制扇形; 否则仅仅绘制弧线。 • paint: 绘制圆弧的画笔属性。
10.2 动画
• android平台提供了两种动画
– Tween动画：设置起始和终止2个状态对象的值， 通过对场景里的对象不断进行图像变换(平移，缩 放，旋转，改变透明度) 来产生动画效果；
– Frame 动画：顺序播放事先做好的图像(Drawable 序列)，原理和电影类似。
第十章 2D绘图与动画
2D图形绘制 动画
10.1 绘图
• 绘图相关对象:
– Activity，是一个框架--绘图对象的容器 – View，代表屏幕上的显示元素 – Canvas，在屏幕上绘图用的“画布”
• 坐标: 左上角(0,0), x—水平向右增加,y—垂 直向下增加
– Paint，在“画布”上绘图用的“画笔” – Color，绘图用的“画笔”的“颜色” – Path，组合图形
– 最后，就是在Activity中像系统中的View一样使用我们自定义 的View了。
• 示例：MyViewDemo
10.1 绘图
• 10.1.3 画布Canvas
– Canvas意为“帆布”，这里我们可以理解为绘图所 用的画布。使用Canvas类提供的各种方法可以在画 布上绘制线条、矩形、圆以及其他可绘制图形。
10.1 绘图
• 2.1.6 Path
– Path类包含一组矢量绘图命令，可以绘制如线条、矩 形、曲线等等。
– 常用方法：
• moveTo(int,int) //移动到新的绘图位置 • lineTo(int,int) //添加线段 • addCircle() //添加圆 • addOval() //添加椭圆 • addRect() //添加矩形 • reset() //清除所有图形
– 绝对距离坐标
• 直接写数值
• 表示从当前位置出发到指定点的横/纵距离（像素数）
– 相对于控件本身的坐标
• 数值%，如：60% • 100%表示从当前位置出发，到指定点正好一个控件的宽
度/高度
– 相对于父控件的坐标
• 数值%p，如：60%p • 100%p表示从当前位置出发，到指定点正好一个父控件
– 如果需要View接受用户的输入，一般需要重载onKeyUp、 onKeyDown、onTouchEvent等方法。
• 使用onDraw绘图，更新View需要使用invalidate方法。需要注 意的是，invalidate 不能直接在除UI线程之外的线程中调用， 因此Android中最常用的方法就是利用Handler来实现UI线程的 更新。
10.1 绘图
• 10.1.4 画笔Paint
– Paint类包含画笔的样式、颜色以及绘制图形（包 括文本）所需的其他信息。
– 主要方法:
• setStyle() //设置样式， Style.FILL或Style.STROKE
• setStrokeWidth(float) //设置画笔的宽度 • setColor() //设置颜色 • setARGB(a,r,b,g) //设置Alpha，Red，Blue，Green值 • setAlpha() //设置Alpha值，就是透明值 • setTextSize(float) //设置字体大小
– 延迟时间startOffset ，以毫秒为单位 – 是否保持动画结束时的状态fillAfter – 是否保持动画开始前的状态fillBefore
– 本次完毕后再循环执行动画的次数repeatCount
– 循环模式repeatMode
• restart 播放完毕后重新播放（默认方式） • reverse 播放完毕后回放（回程算播放一次）
10.1 绘图
• 10.1.3 画布Canvas(续)—主要方法
– drawRect //画矩形 – drawCircle //画圆 – drawLine //画直线 – drawPoint //画点 – drawOval //画椭圆 – drawText //写文本 – drawPath //画一组图形 – drawTextOnPath //在Path上写文本 – drawBitmap //画图片 – setBackgroundColor //设置底色
渐变透明度动画效果 淡入淡出 渐变尺寸缩放动画效果 画面转换位置 移动动画效果 画面转移 旋转动画效果
XML alpha scale translate rotate
CODE AlphaAnimation ScaleAnimation TranslateAnimation RotateAnimation
10.1 绘图
• 10.1.2 自定义View的实现步骤：
– 首先，在values文件夹下定义一个myattr.xml的文件，根据实际 需要在其中描述自定义的控件的属性及其类型。
– 接着，定义一个继承自View的类，并根据实际需要实现View 的一些方法。
• 需要注意的是，如果要在布局文件中使用自定义的View，构造方法应该使用2 个参数：(Context context，AttributeSet attrs)。
• 10.3.1.1 Animation的常用公用属性：
– 执行时间duration，以毫秒为单位 – 加速方式interpolator
• @android:anim/decelerate_interpolator 减速 • @android:anim/accelerate_decelerate_interpolator 加速后减速 • @android:anim/accelerate_interpolator 加速 • @android:anim/linear_interpolator （默认方式）
– 在Android中，屏幕是由Activity类的对象支配的， Activity类的对象引用View类的对象，而View类的对 象又引用Canvas类的对象。
– 通过重写View.onDraw()方法，可以在指定的画布上 绘图。onDraw()方法唯一的参数就是指定在哪个 Canvas实例上绘图。
fromXScale 属性为动画起始时 X坐标上的伸缩尺寸 toXScale 属性为动画结束时 X坐标上的伸缩尺寸 fromYScale 属性为动画起始时Y坐标上的伸缩尺寸 toYScale 属性为动画结束时Y坐标上的伸缩尺寸 pivotX和pivotY意义同前，上述4个属性的取值如下所示：