animation动画特效--一个能随移动而变色的区域

这是一个能随移动而变色的动画特效，我只给出一个能随移动而变色的矩形区域，相信读者有较好的嫁接能力，能借助于本实例实现类似的特效，效果图如下，由于没有录制gif的软件，所以用多幅图片代替。特效如下：

由于图片为静态的局限性，其实该矩形区域是随移动而渐渐变色的，从原来的纯黑到最后的纯白，随着矩形区域的移动而改变。

下面给出该特效的具体实现。

在主activity中不需要任何定义，只需要在xml文件中加入自定类的类（该类继承了view）即可。

 <com.example.day31animator.Regantle 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

由上可见，我定义了一个名为retangle的类，下面是这个类的具体实现

/**
 * 自定义组件
 * @author niit
 *
 */
public class Regantle extends View{
	Point point;//矩形区域左上角坐标
	Paint paint;//画笔
	String color;//颜色
	
	/**
	 * 构造函数
	 * @param context
	 * @param attrs
	 */
	public Regantle(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		paint=new Paint();
		paint.setStrokeWidth(5);
		
	}

	/**
	 * 颜色属性的get与set方法
	 * @return
	 */
	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
		paint.setColor(Color.parseColor(getColor()));
		invalidate();
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		if (point==null) {
			//初始坐标默认为（0,0）
			point=new Point(0,0);
			//绘制 长30宽30的矩形区域
			canvas.drawRect(point.x	, point.y, point.x+30, point.y+30, paint);
			
			XYchange();
		}else {
			canvas.drawRect(point.x	, point.y, point.x+30, point.y+30, paint);
		}
		
	}
	
	public void XYchange() {
		//移动的初始位置和最终位置
		//这里我把它写死了，还可以给个成员变量，可以更灵活
	    Point point_s=new Point(0,0);
		Point point_n=new Point(200, 400);
		
		//移动动画
		final ValueAnimator valueAnimator=ValueAnimator.ofObject(new MyTypeEvaluator(), point_s,point_n);
		
		valueAnimator.addUpdateListener(new AnimatorUpdateListener() {
			
			@Override
			public void onAnimationUpdate(ValueAnimator animation) {
				// TODO Auto-generated method stub
				point=(Point) valueAnimator.getAnimatedValue();
				//重绘
				invalidate();
			}
		});
		
		//颜色动画
		ObjectAnimator objectAnimator=ObjectAnimator.ofObject(this, "color", new ColorTypeEvaluator(), "#00ffff","#ffffff");
		  
		//移动动画与颜色动画的合并
		AnimatorSet aSet=new AnimatorSet();
		aSet.play(valueAnimator).with(objectAnimator);
		//动画时间
		aSet.setDuration(3000);
		//开始动画
		aSet.start();
	}
	
}

该类的具体说明我已给出详细注释。该类涉及到了两个接口，一个是 new MyTypeEvaluator()，另一个是 new ColorTypeEvaluator()，这两个接口的具体说明如下：

new MyTypeEvaluator()的具体介绍如下：

@SuppressWarnings("rawtypes")
public class MyTypeEvaluator implements TypeEvaluator {
	/**
	 * 方法的三个参数的介绍
	 * fraction：进度
	 * startValue:初始状态
	 * endValue:结束状态
	 */
	@Override
	public Object evaluate(float fraction, Object startValue, Object endValue) {
		// TODO Auto-generated method stub
		
		Point startPoint=(Point) startValue;
		Point endPoint=(Point) endValue;
		int x=(int) ((endPoint.x-startPoint.x)*fraction+startPoint.x);
		int y=(int) ((endPoint.y-startPoint.y)*fraction+startPoint.y);
		Point point=new Point(x,y);
		
		return point;
	}

}

new ColorTypeEvaluator()的具体介绍如下：

public class ColorTypeEvaluator implements TypeEvaluator<String>{
	
	/**
	 * 思想介绍：颜色的表示通常为：#ffffff,这里把颜色看做是一个字符串，我这里只进行了前两个字符串的
	 * 终末状态的截取，把截取到的字符串转换为16进制，然后给出一个增量newcolor_int,最后将之复原为string类型，完成拼接
	 */
	@Override
	public String evaluate(float fraction, String startValue, String endValue) {
		// TODO Auto-generated method stub
		
		String color_s=startValue.substring(1, 3);
		String color_e=endValue.substring(1, 3);
		
		int int_s= Integer.parseInt(color_s,16);
		int int_e=Integer.parseInt(color_e,16);
		
		int newcolor_int=(int) ((int_s+int_e)*fraction+int_s);
		String finnalColor="#"+Integer.toHexString(newcolor_int)+"ffff";
		return finnalColor;
	}

}

好啦，到此，一个简单的animation动画特效就完成啦。