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

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