Android属性动画、函数动画

Android动画集锦（属性动画）

先看效果图：

1、第一个图片的闪动光晕效果；
2、双重绘制圆形，利用线程定期画弧度；
3、利用线性函数绘制同心圆从0°到360°完整的路径；
4、将指定的view在指定的抛物线路径上做循环动画；
5、周期函数动画，x方向线性变化，y方向为周期函数：
y = 120 * sin(0.01 * π * x) + 200，从起始点（0，200）到结束点（600,200）之间的动画，并在动画过程中绘制路径和圆形。

周期函数动画代码如下：

/** * TypeEvaluatorView  2019-11-19 */public class TypeEvaluatorView extends View {private Paint circlePaint = new Paint();private P currentP;private float mRadius = 15f;private int width;private int height;private Path path = new Path();private Paint pathPaint = new Paint();private static boolean isFirst = true;private static int repeatCount = 0;private int color[] = { 0xffffffff, 0xFFFF00FF, 0xffffff00, 0xff33ffff };public TypeEvaluatorView(Context context, AttributeSet attrs) {super(context, attrs);}public TypeEvaluatorView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public TypeEvaluatorView(Context context) {super(context);}public void startAnimation() {P startP = new P(0, getHeight() / 2);P endP = new P(getWidth(), getHeight() / 2);// 第一次画路径时，将path的起始位置设置为开始位置if (isFirst) {path.moveTo(0, getHeight() / 2);}ValueAnimator animator = ValueAnimator.ofObject(new OscillationEvaluator(), startP, endP);animator.setDuration(5000).setRepeatCount(Integer.MAX_VALUE);animator.setRepeatMode(Animation.REVERSE);animator.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {// 拿到当前运动到的点位置currentP = (P) animation.getAnimatedValue();// 在起点和终点之间收集绘制路径path.lineTo(currentP.getX(), currentP.getY());// 重绘viewinvalidate();}});animator.addListener(new AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@SuppressLint("NewApi")@Overridepublic void onAnimationRepeat(Animator animation) {isFirst = false;repeatCount++;// 重新设置path路径path.reset();// 根据动画的重复，设置路径的起点和终点if (repeatCount % 2 == 0) {// 偶数次起点在开始位置path.moveTo(0, height / 2);} else {// 奇数次，起点在结束位置path.moveTo(getWidth(), height / 2);}}@Overridepublic void onAnimationEnd(Animator animation) {}@Overridepublic void onAnimationCancel(Animator animation) {}});animator.setInterpolator(new LinearInterpolator());// 设置插值器animator.start();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);width = getWidth();height = getHeight();// path.moveTo(0, height / 2);//炫酷的扇子形状Paint linePaint = new Paint();linePaint.setStyle(Style.STROKE);linePaint.setAntiAlias(true);linePaint.setStrokeWidth(3f);linePaint.setColor(color[0]);// 中间白线canvas.drawLine(0, height / 2, width, height / 2, linePaint);pathPaint.setStyle(Style.STROKE);pathPaint.setAntiAlias(true);pathPaint.setStrokeWidth(5f);pathPaint.setColor(color[0]);circlePaint.setStyle(Style.FILL);circlePaint.setAntiAlias(true);if (currentP == null) {startAnimation();}// 设置不同的四种颜色if (repeatCount % 4 == 0) {circlePaint.setColor(color[0]);pathPaint.setColor(color[0]);} else if (repeatCount % 4 == 1) {pathPaint.setColor(color[1]);circlePaint.setColor(color[1]);} else if (repeatCount % 4 == 2) {pathPaint.setColor(color[2]);circlePaint.setColor(color[2]);} else {pathPaint.setColor(color[3]);circlePaint.setColor(color[3]);}// 画路径canvas.drawPath(path, pathPaint);// 第一次不画圆if (repeatCount >= 1) {canvas.drawCircle(currentP.getX(), currentP.getY(), mRadius, circlePaint);}}class P {private float x;private float y;/** * @param x * @param y */public P(float x, float y) {super();this.x = x;this.y = y;}/** * @return the x */public float getX() {return x;}/** * @param x *            the x to set */public void setX(float x) {this.x = x;}/** * @return the y */public float getY() {return y;}/** * @param y *            the y to set */public void setY(float y) {this.y = y;}}class OscillationEvaluator implements TypeEvaluator<P> {@Overridepublic P evaluate(float fraction, P startValue, P endValue) {P startP = (P) startValue;P endP = (P) endValue;float x = startP.getX() + fraction * (endP.getX() - startP.getX());// x坐标线性变化float y = 120 * (float) (Math.sin(0.01 * Math.PI * x)) + getHeight() / 2;// y坐标取相对应函数值return new P(x, y);}}}

将此自定义的view放在xml布局中即可，view的宽为600dp，高为400dp。

抛物线动画代码：

从（0,0）到（200,200）之间的动画轨迹

public void beginTranslateAnimation(final View view) {ArrayList<Float> xvalues = new ArrayList<Float>();xvalues.add(0f);xvalues.add(200f);ArrayList<Float> yvalues = new ArrayList<Float>();yvalues.add(0f);yvalues.add(200f);final ObjectAnimator translateX = ObjectAnimator.ofObject(view, "translationX",new CustomXTypeEvaluator(), xvalues.toArray());final ObjectAnimator translateY = ObjectAnimator.ofObject(view, "translationY",new CustomYTypeEvaluator(), yvalues.toArray());translateX.setRepeatCount(Integer.MAX_VALUE);translateX.setRepeatMode(ObjectAnimator.REVERSE);translateX.setInterpolator(new LinearInterpolator());translateY.setInterpolator(new AccelerateInterpolator());translateY.setRepeatCount(Integer.MAX_VALUE);translateY.setRepeatMode(ObjectAnimator.REVERSE);// translateX.setInterpolator(new BounceInterpolator());// translateX.setInterpolator(new CycleInterpolator(0.6f));AnimatorSet animatorSet = new AnimatorSet();animatorSet.playTogether(translateX, translateY);animatorSet.setDuration(1000);animatorSet.start();view.invalidate();}

x方向线性运动，CustomXTypeEvaluator.java:

/** * TypeEvaluator 2019-11-26 */public class CustomXTypeEvaluator implements TypeEvaluator<Float> {@Overridepublic Float evaluate(float f, Float startValue, Float endValue) {float x = startValue + f * (endValue - startValue);// float x = startValue * 1.2f;return x;}}

y方向抛物线运动，CustomYTypeEvaluator.java:

/** * TypeEvaluator 2019-11-26 */public class CustomYTypeEvaluator implements TypeEvaluator<Float> {@Overridepublic Float evaluate(float f, Float startValue, Float endValue) {float y = startValue + f * f * (endValue - startValue);return y;}}

获取源代码加VX：13361000135

Android动画集锦（属性动画）

周期函数动画代码如下：

抛物线动画代码：

更多相关文章

随机推荐