Xamarin Getting Started翻译系列四--图像和动画

来源:互联网 发布:单片机的原理与应用pdf 编辑:程序博客网 时间:2024/05/16 11:57

图像和动画Graphics and Animation

介绍Xamarin.Android 中的图像和动画

An Introduction to Graphics and Animation in Xamarin.Android

 概述Overview

 考虑到运行在移动设备上,通常电量都是有限的,因此绝大多数移动应用程序都具有精致的用户体验,包括利用高质量图像和动画提供直观、灵敏、动态的交互。由于移动应用程序越来越精细,用户也对应用程序期望越来越多。

Despite running on what are, traditionally, devices with limited power, the highest rated mobile applications often have a sophisticated User Experience (UX), complete with high quality graphics and animations that provide an intuitive, yet responsive and dynamic feel. And as mobile applications get more and more sophisticated, users have begun to expect more and more from applications.

幸运的是,现代的移动平台具有非常强大的框架用于创建精巧的动画和用户图形,而且非常简单易用。使开发者稍加努力就可实现良好的交互性。

Luckily for us, modern mobile platformshave very powerfulframeworks for creating sophisticated animations and custom graphics,while being easy to use. This enables developers to add rich interactivity with very little effort.

Android的UI API框架可粗略分为两类:图像和动画。

UI API frameworksin Android can roughly be split into two categories: Graphics and Animation.

 

图像进一步分为2D和3D图像两种不同的实现方式。3D图像由大量内建框架如OpenGL ES(移动版本的OpenGL)、三方框架如MonoGame(与XNA兼容的跨平台工具)。3D图像超出本文范围,这里只讨论内建的2D绘制技术。

Graphics are further split into differentapproaches for doing 2D and 3D graphics.3D graphics are available via a number of built in frameworkssuch as OpenGL ES (a mobile specificversion of OpenGL),and 3rd party frameworks such as MonoGame(a cross platformtoolkit compatible with the XNA toolkit). 3D graphics are out of scope for this article,but we will examine the built- in 2D drawing techniques.

Android为创建2D图像提供两种不同的API。一个通过高级声明方式,另一种是使用低级API编程来实现:

Android provides two different API’s for creating 2D graphics.One is a high level declarative approach and the other a programmatic low-level API:

 

 

Drawable Resources These are use to create custom graphicseither programmatically or, more typically, by embedding drawing instructions in XML files. Drawable resources

are typically defined as XML files that contain instructions or actions for Android to render a 2D graphic.

Canvas this is a low level API that involves drawing directly on an underlyingbitmap and providesvery fine-grained controlover what is displayed.

Drawable资源—通过编程或嵌入XML文件来创建自定义图像。Drawable资源通常定义为包含指令和动作的XML文件,用来渲染Android 2D图像。

Canvas—低级别API,直接在位图上绘制,提供更好的显示控制粒度。

除了这些2D图像技术,Android还提供了其他方式创建动画:

In addition to these 2D graphics techniques, Android also providesseveral different ways to createanimations:

 

 

Drawable Animations -Android also supportsframe-by-frame animations known as DrawableAnimation . This is the simplest animationAPI - Android will sequentially load and display Drawable resourcesin sequence, much like a cartoon.

View Animations -View Animation s are the original animationAPI’s in Android and are available in all versionsof Android. This API is limited in that it will only work with View objects and can only perform simple transformations on those Views. View animationsare typically defined in XML files found in the /Resources/anim folder.

Property Animations -Android 3.0 introduced a new set of animationAPI’s known as Property Animations . These new API’s introduced an extensible and flexible system that can be used to animate the properties of any object, not just View objects.This flexibility allows animations to be encapsulated in distinct classes that will make code sharing easier.

Drawable动画—Android同时提供叫做Drawable动画的帧到帧动画。这是最简单的动画API,Android按顺序加载和显示Drawable资源,如卡通动画。

视图动画—视图动画是Android最初的动画API,可用于各种Android版本。这种动画的限制是只能用于视图对象,而且只能对视图执行简单的变换。视图动画通常定义在/Resources/anim目录下的XML文件中。

属性动画—Android3.0引入一种新的动画API,叫做属性动画。这个新的API带来了可扩展、灵活的系统,针对对象的属性设置动画,而且不在仅仅针对视图对象。这种灵活性可以使动画封装到独立的类中,更容易代码共享。

视图动画更适用于Android3.0之前版本的API(API11)。否则应用程序应使用新的属性动画API,以便于应用上面提到的优势。

View Animations are more suitablefor applications that must support the older pre-Android 3.0

 

API’s (API level 11). Otherwise applications should use the newer PropertyAnimation API’s for the reasons that were mentioned above.

这些框架都是可选的,然而应该首选属性动画,其提供更灵活的API。属性动画允许将动画逻辑封装到独立的类中,易于共用和维护。

All of these frameworks are viable options, however were possible preferenceshould be given to PropertyAnimations, as it is a more flexibleAPI to work with. PropertyAnimations allow for animation logic to be encapsulated in distinct classes that makes code sharing easier and simplifies code maintenance.

2D 图像

Drawable资源在android中是通用技术。同其他资源一样,drawable资源是可声明的——定义在XML文件中。这样可将资源与代码分离。可以简化开发和维护,当需要修改图像的时候不必调整代码。

Drawable Resources are common and popular technique in Android applications. As with other resources, DrawableResources are declarative – they’re defined in XML files. This approach allows for a clean separation of code from resources. This can simplifydevelopment and maintenance because it is not necessaryto change code to update or change the graphicsin an Android application.

然而,drawable资源仅可用于简单常见的图像需求,缺少对Canvas的控制 API。

However, while Drawable Resourcesare useful for many simple and common graphic requirements, but the lack the power and control of the Canvas API.

另一种技术,使用Canvas对象,与其他商业API框架如System.Drawing、IOS的Core Drawing相似。使用Canvas对象可更加灵活的创建2D图像。适用于drawable资源不可用或不能满足要求的情况。例如,需要计算滑块位置来绘制自定义的滑块控件。

The other technique, using the Canvas object, is very similarto other traditional API frameworkssuch as System.Drawing, or iOS’s Core Drawing. Using the Canvas object provides the most control of how 2D graphics are created. It is appropriate for situations where a DrawableResource will not work or will be difficult to work with. For example,it may be necessary to draw a custom slider control whose appearance will change based on calculations related to the

value of the slider.

首先讲述drawable资源。很简单,可用于常用的自定义绘制场景。

Let’s examine Drawable Resourcesfirst. They are simpler and cover the most common custom drawing cases.

Drawable资源

Drawable资源定义在/Resources/drawable目录的XML文件中。与嵌入的PNT、JPEG不同,没有必要指定分辨率相关的drawable资源版本。在运行时,Android应用程序加载这些资源,使用XML文件中指定的内容构建2D图像。Android定义了不同类型的drawable资源:

Drawable Resourcesare defined in an XML file in the directory/Resources/drawable. Unlikeembedding PNG or JPEG’s, it is not necessary to provide density-specific versions of DrawableResources. At runtime,an Android application will load these resources and use the instructions containedin these XML files to create 2D graphics. Android defines severaldifferent

types of DrawableResources:

 

Drawable资源

描述

ShapeDrawable

可绘制原始的几何图形,并可在图形上应用一系列图像效果。常用于自定义按钮或TextView背景。接下来将看到如何使用ShapeDrawable

This is a Drawable object that draws a primitive geometric shape and applying a limited set of graphical effects on that shape. They are very useful for things such as customizing Buttons or setting the background of TextViews. We will see an example of how to use a ShapeDrawable lateron this article.

StateListDrawable

可根据控件状态改变外观的drawable资源。例如,按钮下下压状态和非下压状态的不同外观。

This is a Drawable Resource that will change appearance based on the state of a widget/control. For example, a button may change its appearance depending on if it is pressed or not.

LayerDrawable

drawable资源上下堆积在一起的drawable资源。效果如下所示:

This Drawable Resource that will stack several other drawables one on top of another. An example of a LayerDrawable is shown in the following


TransitionDrawable

是一种LayerDrawable,不同之处在于可实现按层显示的动画。

This is a LayerDrawable but with one difference. A TransitionDrawable is able to animate one layer showing up over top another

LevelListDrawable

StateListDrawable相似,根据特定条件显示图像。然而,与StateListDrawable不同,LevelListDrawable根据一个整数值显示图像。LevelListDrawable可用于显示WiFi信号强弱,强度变化时显示图像也发生变化。

This is very similar to a StateListDrawable in that it will display an image based on certain conditions. However, unlike a StateListDrawable, the LevelListDrawable displays an image based on an integer value. An example of a LevelListDrawable would be to display the strength of a WiFi signal. As the strength of the WiFi signal changes, the drawable that is displayed will change accordingly

ScaleDrawable/ ClipDrawable

提供旋转和裁剪功能。ScaleDrawable缩放其他drawable资源,而ClipDrawable裁剪其他drawable资源。

As their name implies, these Drawables provide both scaling and clipping functionality. The ScaleDrawable will scale another Drawable, while the ClipDrawable will clip another Drawable

InsetDrawable

常用于作为小于视图实际边框的背景

It is used when a View needs a background that is smaller than the View’s actual bounds

BitmapDrawable

是定义在XML中的一系列位图操作指令。可指定贴图、抖动、反锯齿等操作。常用于给布局的背景贴图。

This file is a set of instructions, in XML, that are to be performed on an actual bitmap. Some actions that Android can perform are tiling, dithering, and anti-aliasing. One of the very common uses of this is to tile a bitmap across the background of a layout

 

Drawable范例

 

现在快速讲解如何使用ShapeDrawable创建2D图像。ShapeDrawable可以定义四种基本图形:矩形、椭圆、线、环(ring)。也可应用基本特效,如渐变、颜色、大小。如下XML定义了一个ShapeDrawable(可从AnimationsDemo范例中找到Resources/drawable/shape_rounded_blue_rect.xml)。定义一个矩形,使用紫色渐变,并指定圆角

 

Let’s look at a quick exampleof how to create a 2D graphic using a ShapeDrawable. A ShapeDrawable can define one of the four basic shapes: rectangle,oval, line, and ring. It is also possible to apply basic effects, such as gradient,colour, and size. The followingXML is a ShapeDrawable that maybe found in the AnimationsDemo companionproject, in the file Resources/drawable/shape_rounded_blue_rect.xml. It defines a rectanglewith a purple gradient backgroundand rounded corners:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle">

<!-- Specify a gradient for the background -->

<gradient android:angle="45"android:startColor="#55000066"android:centerColor="#00000000"android:endColor="#00000000" android:centerX="0.75" />

<padding android:left="5dp"android:right="5dp" android:top="5dp" android:bottom="5dp" />

<corners android:topLeftRadius="10dp"android:topRightRadius="10dp"android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" />

</shape>

 

可按如下方式在布局或其他drawable中引用这个资源:

We can reference this Drawable Resourcedeclaratively in a Layout or other Drawable,as shown in the followingXML:

 

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="#33000000">

<TextView android:layout_width="wrap_content"android:layout_height="wrap_content" android:layout_centerInParent="true"android:background="@drawable/shape_rounded_blue_rect"


</RelativeLayout>

 

Drawable资源也可用代码来引用。下面代码给TextView设置背景:

Drawable Resources can also be applied programmatically. The following code snippet shows how to programmatically set the background of a TextView:

 

TextView tv = FindViewById<TextView>(Resource.Id.shapeDrawableTextView);

 tv.SetBackgroundResource(Resource.Drawable.shape_rounded_blue_rect);


具体效果请运行AnimationsDemo项目,选择主菜单中的ShapeDrawable项目。将看到如下效果:

To see what this would look like, run the AnimationsDemo project and select the Shape Drawable item from the main menu. We should see somethingsimilar to the following screenshot:


更多drawable资源语法和xml元素的描述,见Google’sdocumentation.

For more details about the XML elements and syntax of Drawable Resources, consult  Google’sdocumentation.

 

使用Canvas绘制API

 

Drawable资源很强大但有一定限制。有的效果很难或不可能实现。例如,对摄像机设备拍摄的图像应用滤镜。很难使用drawable资源实现去红眼效果。然而,使用Canvas API可让应用程序更细粒度的控制图像特定区域中的颜色变化。

Drawables are powerful but have their limitations. Certainthings are either not possibleor very complex. For example,applying a filter to a picture that was taken by a camera on the device. It would be very difficult to apply red-eyereduction by using a DrawableResource. Instead, the Canvas API allows an application very find grainedcontrol to selectively change colors in a specificpart of the picture.

Paint类通常用于处理Canvas。这个类具有与绘制相关的颜色、风格信息。常用于提供颜色、透明度等信息。

One class that is commonly used with the Canvas is the Paint class. This class holds colour and style information about how to draw on the class. It is used to provide things such a color andtransparency.

CanvasAPI使用打印机模型来绘制2D图像。操作按层次生效。每个操作将覆盖同区域的下层位图。当区域重叠时新的绘制将部分或全部覆盖原有的绘制。这与其他绘制API如System.Drawing和IOS CoreGraphics相同。

The Canvas API uses the painter’smodel to draw 2D graphics.Operations are applied in successive layers on top of each other. Each operation will cover some area of the underlyingbitmap. When the area overlapsa previously paintedarea the new paint will partially or completely obscure the old. This is the same way many other drawing APIs such asSystem.Drawing and iOS’s Core Graphics work.

有两种方式获取Canvas对象。第一种方式定义一个Bitmap对象,然后用它实例化Canvas对象。例如,如下代码基于位图创建一个新的Canvas:

There are two ways to obtain a Canvasobject. The first way involves defining a Bitmapobject, and then instantiate a Canvasobject with it. For example, the following code snippet createsa new canvas with an underlying bitmap:


Bitmap bitmap = Bitmap.CreateBitmap(100, 100, Bitmap.Config.Argb8888); 

Canvas canvas = new Canvas(b);


另一种方式是在视图基类提供的OnDraw回调函数中获取Canvas对象。当Android需要绘制视图的时候,就会调用这个方法,传递视图的Canvas对象。

The other way to obtain a Canvasobject is by the OnDrawcallback method that is provided the View base class. Android calls this method when it decidesa View needs to draw itself, and passing in a Canvasobject for the View to work with.

Canvas的方法为绘制提供指令。这些方法命名为DrawXXX(),例如:

Canvas.DrawPaint(Paint p) 用指定的paint填充整个位图的画布

Canvas.DrawPath(Path path, Paint paint) 用指定的paint绘制几何图形

Canvas.DrawText(String text, float x, float y, Paint paint) 在画布上绘制文字,指定颜色、位置(xy坐标)


The Canvas class exposes methodsto programmatically providethe draw instructions. These methods are named Draw…(), for example:

Canvas.DrawPaint(Paint p) Fills the entire canvas’sbitmap with the specified paint.

Canvas.DrawPath(Path path, Paint paint) Draws the specified geometricshape using the specified paint.

Canvas.DrawText(String text, float x, float y, Paint paint) Draws thetext on the canvas, with the specifiedcolour, with the at x,y.

 

使用Canvas API进行绘制

 

下面看一下Canvas API的范例。下面的代码片段演示如何绘制视图:

Let’s see an example of the Canvas API. The followingcode snippet is from the The followingcode snippet shows how to draw view:

 

public class MyView : View

{

protected overridevoid OnDraw(Canvas canvas)

{

Color = Color.Rgb(0x99, 0xcc, 0),

base.OnDraw(canvas);

Paint green = newPaint{

AntiAlias = true,  };

green.SetStyle(Paint.Style.FillAndStroke);

Paint red = new Paint { AntiAlias= true,

Color = Color.Rgb(0xff, 0x44, 0x44)

};

red.SetStyle(Paint.Style.FillAndStroke);

float middle = canvas.Width * 0.25f;

canvas.DrawPaint(red);

canvas.DrawRect(0, 0, middle, canvas.Height, green);

}

}

上面的代码首先创建一个红色和绿色paint对象。将画布填充为红色,在指示画布绘制一个25%宽度的绿色区域。范例源码可在AnimationsDemo项目中的查找。启动应用程序后,选择主菜单中的Drawing Item项,可看到如下截图:

This code above first creates a red paint and a green paint object. It fills the content of the canvaswith red, and then instructsthe canvas to draw a green rectanglethat is 25% of the width of the canvas.An example of this can be seen by in AnimationsDemo project that is includedwith the source code for this article.By starting up the application and selecting the Drawing item from the main menu, we should a screen similar to the following:


动画

 

 

用户喜欢应用程序动起来。动画可以极大的提升应用程序的用户体验,使应用程序更出色。好的动画让用户感觉非常自然而不会给注意到。Android提供如下API

视图动画早期Android提供的API。这些动画可操作特定视图,在View上执行简单的变换。因为简单,这些API还很有用,比如进行透明动画、旋转、等等。

属性动画属性动画在Android3.0引入,使应用程序可以让任意内容动起来。属性动画可以修改任意对象的任意属性,即使对象在屏幕上不可见。

Drawable动画特殊的drawable资源,用于在布局上应用一个简单的动画效果。

Users like things that move in their applications. Animations are a great way to improve the user experience of an application and help it stand out. The best animations are the ones that users don’t notice because they feel natural.Android provides the following three API’s for:

 

 

View Animation This is the original API that Android provided. These animations are tied to a specificView and can perform simple transformations on the contentsof the View. Because of it’s simplicity, this API still useful for things like alpha animations,rotations, and so forth.

Property Animation Property animations were introduced in Android 3.0 and enable an application to animate almost anything. Propertyanimations can be used change any property of any object, even if that object is not visible on the screen.

Drawable Animation This a special Drawable resourcethat used to apply a very simple animation effect to layouts.

属性动画更灵活,提供更多特性,通常优先使用。

In general property animationis the preferred system to use as it is more flexibleand offers more features.

 

视图动画

视图动画仅可用于视图,只可对如起点终点、尺寸、旋转、透明这些值执行动画。这种动画是典型的补间动画。视图动画可由两种方式定义,一种是用代码,一种是用XML文件。首选XML文件方式定义视图动画,使项目更易维护。

View animations are limitedto Views and can only perform animations on values such as start and end points, size, rotation, and transparency. These types of animations are typically referred to as tween animations. View animations can be defined two ways – programmaticallyin code or by using XML files. XML files are the preferred way to declare view animations, as they are more readableand easier to maintain.

XML动画文件存储在Xamarin Android项目的/Resources/anim目录中。根节点必须有如下元素:

alpha淡入淡出动画.

rotate旋转动画.

scale缩放动画.

translate 水平或绘制移动.

set包含其他动画元素的集合.

 

The animation XML files will be stored in the /Resources/animdirectory of a

Xamarin.Android project. This file must have one of the following elementsas the root element :

 

 

alpha- This is a fade-in or fade-outanimation.

rotate- This is a rotationanimation.

scale- A resizinganimation.

translate - This is a horizontal and/or vertical motion.

set- This is a containerthat may hold one or more of the other animation elements.

 

默认的,XML文件中所有动画都同时执行。要让动画属性执行,在上面的元素上设置android:startOffset属性。

可使用插值算法改变动画的频率。插值算法实现了递增、循环、递减的动画效果。Android框架提供了几个内置的插值算法,如:

AcclerateInterpolator / DecelerateInterpolator 这个插值算法增加或减少动画频率.

BounceInterpolator 反复变化(the change bouncesat the end.

 

LinearInterpolator 频率恒定变化.

 

By default, all animations in an XML file will be applied simultaneously. To make animationsoccur sequential, set the android:startOffset attribute on one of the elementsdefined above.

It is possible to affect the rate of change in an animation by use an interpolator . An interpolatorallows animate effects to be accelerated, repeated,or decelerated. The Android frameworkprovides several interpolators out of the box, such as (but not limitedto):

 

 

AcclerateInterpolator / DecelerateInterpolator these interpolatorsincrease or decreasethe rate of change in an animation.

BounceInterpolator the change bouncesat the end.

 

LinearInterpolator the rate of changes is constant.

 

如下XML包含了多个动画元素:

The following XML shows an example of an animation file that combinessome of these elements:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android=http://schemas.android.com/apk/res/androidandroid:shareInterpolator="false">

<scaleandroid:interpolator=

"@android:anim/accelerate_decelerate_interpolator"

android:fromXScale="1.0"android:toXScale="1.4" android:fromYScale="1.0"android:toYScale="0.6" android:pivotX="50%"android:pivotY="50%" android:fillEnabled="true"android:fillAfter="false" android:duration="700" />

<set android:interpolator=

"@android:anim/accelerate_interpolator">

<scale android:fromXScale="1.4"android:toXScale="0.0" android:fromYScale="0.6"android:toYScale="0.0" android:pivotX="50%"android:pivotY="50%" android:fillEnabled="true"android:fillBefore="false" android:fillAfter="true"android:startOffset="700" android:duration="400" />

<rotate android:fromDegrees="0"android:toDegrees="-45" android:toYScale="0.0"android:pivotX="50%" android:pivotY="50%"android:fillEnabled="true" android:fillBefore="false"android:fillAfter="true"

android:startOffset="700" android:duration="400" />

</set>

</set>

 

这个动画将同时执行多有子动画首先缩放动画将水平拉伸垂直方向压缩图像。同时图像逆时针旋转45度,收缩后从屏幕上消失。

动画可用代码应用到视图上。Android提供了Android.Views.Animations.AnimationUtils帮助类获取动画资源,并返还Android.Views.Animations.Animation实例。应用动画的视图调用StartAnimation,并传递动画对象。代码如下:

Thisanimation will perform all the animations simultaneously – the first scale animation will stretch the image horizontally and shrink it vertically. Then the image will simultaneously be rotated 45 degrees counter-clockwise and shrunk as it is not on the screen.

 

Once the animation is applied, it can be programmatically appliedto a View by inflatingthe animation and then applyingit to a View. Androidprovides the helper class Android.Views.Animations.AnimationUtils that will inflate an animationresource and returnan instance of Android.Views.Animations.Animation. This object is applied to a View by calling StartAnimation and passing the Animation object. The following code snippet shows an example of this:

 

Animation myAnimation =AnimationUtils.LoadAnimation(Resource.Animation.MyAnimation); ImageView myImage= FindViewById<ImageView>(Resource.Id.imageView1);myImage.StartAnimation(myAnimation);

现在我们基本上理解的视图动画工作原理了,下面讲解属性动画。

Now that we have a fundamental understanding of how View Animations work, lets move on to

 

Property Animations.

 

 

属性动画

 

属性动画是Android3.0引入的新API。提供了可用于任何对象任何属性上的扩展API。

所有属性动画都是Animator的子类。应用程序不能直接使用这个类,而是使用它的子类:

ValueAnimator 这个类是整个属性动画API中非常重要的类。计算属性值的变化。然而ViewAnimator不直接更新这些值。而是触发事件让用户更新动画对象。

ObjectAnimatorValueAnimator的子类. 简化了动画过程,只接受一个目标对象和要更新的属性值。

AnimationSet 这个类负责调度其他动画的执行。动画可以并发执行、顺序执行,或指定之间的间隔。

 

Property animators are a new API that was introduced in Android 3.0. They provide a more extensible API that can be used to animate any property on any object.

All property animationsare created by instances of the Animator subclass. Applications do not directly use this class, instead the will use one of it’s subclasses:

ValueAnimatorThis class is the most important class in the entire propertyanimation API. It calculates the values of properties that need to be changed. The ViewAnimator does not directlyupdate those values however. Instead it will raise events that can be used to update animated objects.

ObjectAnimatorThis class is a subclassof ValueAnimator. It is meant to simplifythe process of animating objects accepting a target object and property to update.

AnimationSet This class is responsible for orchestrating how animations run in relationto one another. Animations may run simultaneously, sequentially, or with a specifieddelay between them.

 

 

在动画过程中使用特定的求值器计算新值。Android提供了如下求值器:

IntEvaluator 计算整数属性的值.

FloatEvaluator计算浮点属性值.

ArgbEvaluator 计算颜色属性.

Evaluators are special classes that are used by animatorsto calculate the new values during an animation. Out of the box, Android provides the following evaluators:

 

 

IntEvaluator This will calculate values for integer properties. FloatEvaluatorThis will calculatevalues for float properties. ArgbEvaluatorThis will calculatevalues for colour properties.

如果用于动画的属性不是浮点数、整数或颜色值,应用程序可以实现ITypeEvaluator接口创建自定义的求值器。本文将讨论实现自定义求值器的话题,后面的文档也会涉及。

If the property that is being animated is not a float,intor colour, applications may create their own evaluator by implementing the ITypeEvaluator interface. Implementing custom evaluators is beyond the scope of this documentand will be covered in future documentationfrom Xamarin.

 

使用ValueAnimator

动画分为两个部分:技术动画值,将这些值付给对象的属性。ValueAnimator只计算值,但不会直接操作对象。对象在动画有效期触发的事件中进行更新。这样的设计可以用一个动画值更新多个属性。

通过如下工厂方法获取ValueAnimator实例:

ValueAnimator.OfInt

ValueAnimator.OfFloat

ValueAnimator.OfObject

接着设置ValueAnimator实例的持续时间,然后启动。下面的范例展示在1000毫秒内将动画值从0递增到1

There are two parts to any animation: calculating animated values and the settingthose values on properties on some object.ValueAnimator will only calculate the values, but it will not operateon objects directly.Instead, objects will be updated inside event handlers that will be invoked during the animation lifespan. This design allows several properties to be updated from one animated value.

 

You obtain an instance of ValueAnimator by callingone of the following factory methods:

 

 

ValueAnimator.OfIntValueAnimator.OfFloat ValueAnimator.OfObject

 

Once that is done, the ValueAnimator instance must have its durationset, and then it can be started.The following exampleshows how to animate a value from 0 to 1 over the span of 1000milliseconds:

  ValueAnimator animator = ValueAnimator.OfInt(0,100);

  animator.SetDuration(1000);

  animator.Start();

 

上面的代码并不起什么作用动画会执行但不会更新模板对象的值。动画在产生新值的时候通知监听者,触发一个更新事件。应用程序需要提供事件处理器,如下所示:

But itself, the code snippet above is not very useful – the animator will run but there is no target for the updated value. The Animator class will raise the Update event when it decides it is necessary to inform listenersof a new value. Applications may provide an event handlerto respond to this event as shown in the following code snippet:

 

MyCustomObject myObj = new MyCustomObject();

myObj.SomeIntegerValue = -1;

 

animator.Update+= (object sender,ValueAnimator.AnimatorUpdateEventArgse) =>

{

int newValue = (int) e.Animation.AnimatedValue;

// Apply this new value to the object being animated.myObj.SomeIntegerValue = newValue;

};

现在已经了解了ValueAnimator,接下来学习ObjectAnimator

Now that we have an understanding of ValueAnimator, lets learn more about the

 

ObjectAnimator.

 

 

使用ObjectAnimator

ObjectAnimatorViewAnimator的子类,组合了定时引擎和通过事件绑定方式技术值的ValueAnimatorValueAnimator需要应用程序显示指定事件处理器,而ObjectAnimator自动做了这个步骤。

ObjectAnimator是非常简单的ViewAnimator API,只需要提供一个对象和一个要更新的属性名称。下面代码是ObjectAnimator范例:

ObjectAnimatoris a subclass of ViewAnimator that combines the timing engine and value computation of the ValueAnimator with the logic required to wire up event handlers. The ValueAnimator required applications to explicitly wire up an event handler– ObjectAnimatorwill take care of this step for us.

 

The API for ObjectAnimator is very similar to the API for ViewAnimator, but requiresyou provide the object and the name of the property to update. The following exampleshows an example of using ObjectAnimator:

MyCustomObject myObj = new MyCustomObject();

myObj.SomeIntegerValue = -1;

ObjectAnimator animator = ObjectAnimator.OfFloat(myObj, “SomeIntegerValue”, 0, 100);

animator.SetDuration(1000);

animator.Start();

 

从上面的代码可见,ObjectAnimator可简化创建动画对象的必要代码。

As you can see from the previous code snippet ObjectAnimator can reduce and simplifythe code the code that is necessaryto animate an object.

 

Drawable Animations

 

最好的动画APIdrawable动画。Drawable动画按顺序加载一系列的drawable资源并显示,与卡通动画相似。

Drawable资源定义在xml文件中,具有一个跟节点和一系列定义动画帧的子节点。Xml文件存储在/Resource/drawable应用程序目录。下面是drawable动画xml范例:

 

The final animationAPI is the Drawable animation. Drawable animations load a series of

Drawable resources one after the other and display them sequentially, similarto a flip-it cartoon.

 

Drawable resources are definedin an XML file that has an element as the root element and a series of elements that define each frame in the animation. This XML file is stored in the

/Resource/drawable folder of the application. The following XML is an example of a drawableanimation:

 

<animation-listxmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/asteroid01" android:duration="100" />

 

<item android:drawable="@drawable/asteroid02" android:duration="100" />

 

<item android:drawable="@drawable/asteroid03" android:duration="100" />

 

<item android:drawable="@drawable/asteroid04" android:duration="100" />

 

<item android:drawable="@drawable/asteroid05" android:duration="100" />

 

<item android:drawable="@drawable/asteroid06" android:duration="100" />

 

</animation-list>

这个动画具有6帧。android:duration属性指定每帧显示的时间。下面代码展示创建drawable动画并在用户点击按钮的时候启动动画:

This animation will run through six frames. The android:duration attribute declares how long each frame will be displayed.The next code snippet shows an example of creating a Drawableanimation and startingit when the user clicks a button on the screen:

AnimationDrawable_asteroidDrawable;

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);SetContentView(Resource.Layout.Main);

_asteroidDrawable= (Android.Graphics.Drawables.AnimationDrawable)Resources.GetDrawable(Resource.Drawable.spinning_asteroid);

ImageView asteroidImage = FindViewById<ImageView> (Resource.Id.imageView2);

asteroidImage.SetImageDrawable((Android.Graphics.Drawables.Drawable)

_asteroidDrawable);

Button asteroidButton = FindViewById<Button>(Resource.Id.spinAsteroid);

asteroidButton.Click += (sender, e) =>

{

_asteroidDrawable.Start();

};

}

 

至此我们已经讲解了Android应用程序可用的动画基础内容。

At this point we have covered the foundations of the animationAPIs available in an Androidapplication.

 

 

结论

 

本文介绍了几个新概念和API,帮我们在Android应用程序中添加图像。首先讨论了各种2D图像API,并阐述了Android直接绘制对象画布的方式。也看到使用XML声明的方式创建图像的技术。下面将继续讨论创建Android动画的新老API

This article introduced a lot of new conceptsand API’s to help add some graphicto an Android application. First it discussedthe various 2D graphics API’s and demonstrated how Android allows applications to draw directly using a Canvas object. We also saw some alternatetechniques that allow graphics to be declaratively created using XML files. Then we went on to discuss the old and new API’s for creating animations in Android.


0 0