Android动画实例 (一)
发布时间:2018-02-01 来源:查字典编辑
摘要:效果图比较简单,就是一个控制绘制小球的坐标变化,再加上一个底部阴影的效果(效果出来了,不够好看)实现思路刚看到效果的时候,想着用两个个动画组...
效果图
比较简单,就是一个控制绘制小球的坐标变化,再加上一个底部阴影的效果(效果出来了,不够好看)
实现思路
刚看到效果的时候,想着用两个个动画组合实现
一个小球升起落下的动画
一个小球从圆变成椭圆的动画
再加上一个底部阴影线的绘制的缩放动画
再实现过程过程中发现第一个动画和第二个动画之间不连贯,圆变成椭圆之间有停顿,即使第一个动画开始之后立即开始第二个动画,然后突然想到直接改成绘制椭圆,之后就很顺畅,最后底部的阴影线也直接控制坐标绘制,不使用动画,代码:
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 控件的大小设置为半径的8倍 int size = mRadius * 8; setMeasuredDimension(size, size); startY = stopY = size; }
通过自定义属性radius设置小球的半径,设置控件的大小为radius * 8,startY和stopY 为底部阴影线的其实坐标的Y坐标,因为在控件最底部,所以为跟控件大小一致
// 控制椭圆坐标的动画 ValueAnimator ovalAnimator = ValueAnimator.ofFloat(mRadius * 0f, mRadius * 7f); ovalAnimator.setDuration(1000); ovalAnimator.setRepeatCount(ValueAnimator.INFINITE); ovalAnimator.setRepeatMode(ValueAnimator.REVERSE); ovalAnimator.addUpdateListener(this); ovalAnimator.start();
椭圆就是小球,小球是通过绘制椭圆的方式来实现的,ValueAnimator.ofFloat(mRadius * 0f, mRadius * 7f) 写mRadius * 0f和mRadius * 7f,是因为最后实现的效果是让小球的高度最多缩小的mRadius * 1f,所以坐标最多移动7f。并且设置无限循环
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制阴影,阴影的长度最多等于小球的长度, canvas.drawLine(startX, startY, stopX, stopY, mShadowPaint); canvas.drawOval(mBound, mPaint); }
在onDraw中绘制阴影线和椭圆
@Override public void onAnimationUpdate(ValueAnimator animation) { mBound.top = (float) animation.getAnimatedValue(); mBound.bottom = mRadius * 2 + ((float) animation.getAnimatedValue()); if(mBound.bottom > mRadius * 8) mBound.bottom = mRadius * 8; // 计算需要画的线的起始点,y不变,主要计算x // 控件的大小为radius的8倍,椭圆最多缩小到radius的1倍 // 让线的长度最多为radius的2倍,即和小球的初始大小一样 // 让小球下落的速度跟线增长的速度一样,那么线从0 到 radius * 2,就需要小球从 0 到radius * 2 // 整个控件8 * radius,椭圆最多缩小到1 * radius, 需要的增大长度radius * 2 // 那么需要在小球的top下落到radius * 5的时候开始画线 float lineWidth = mBound.top - mRadius * 5f; if(lineWidth < 0) { startX = stopX = 0; } else { startX = (mRadius * 8 - lineWidth) / 2; stopX = lineWidth + startX; } invalidate(); }
在动画监听中控制坐标,然后不停出发绘制方法,比较简单