Android动画实例 (一)
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();
}

在动画监听中控制坐标,然后不停出发绘制方法,比较简单

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类