关闭

Android动画之旅(一)----小球弹起动画

标签: android动画
940人阅读 评论(5) 收藏 举报
分类:

学习了一段时间安卓动画 有时间会整理一下,先暂时这样看吧.

小球弹起动画

动画组成:

1.主体是一个小球沿着运动轨迹做加速运动,然后设置循环,以及逆向播放.

2.在小球下落到最底部的时候,小球会产生形变.变成椭圆

3.在小球快要触底的时候,会产生阴影.(阴影也是椭圆)

4.点击变色主要是画笔的绘制变色.
关键代码:

package com.example.administrator.animationworkdemo.views;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateInterpolator;

import java.util.Random;

/**
* Created by SuperD on 2017/2/15.
* 小球弹起的Loading加载动画
*/

public class CircleLoadingView extends View implements View.OnClickListener {
//起始点
private int mStartPointX;
private int mStartPointY;
//结束点
private int mEndPointX;
private int mEndPointY;
//小球的运动点
private int mMovePointX;
private int mMovePointY;

//小球的半径
private int mRadius = 20;
//运动轨迹的长度
private int mHeight;

//阴影区域的线
private Paint mPaint;
private Paint mHelperPaint;
private Path mHelpPath;

private int[] colors = {Color.BLACK, Color.BLUE, Color.DKGRAY, Color.GREEN, Color.RED, Color.YELLOW};


public CircleLoadingView(Context context) {
    this(context, null);
}

public CircleLoadingView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mHelpPath = new Path();
    //绘制辅助线和辅助点的画笔
    mHelperPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mHelperPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mHelperPaint.setStrokeWidth(5);
    mHelperPaint.setColor(Color.BLUE);

    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setStrokeWidth(2);
    mPaint.setColor(Color.parseColor("#3F3B2D"));
    setOnClickListener(this);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    //取起始点在屏幕中间
    mStartPointX = w / 2;
    mEndPointX = w / 2;
    mEndPointY = h / 2;
    mStartPointY = mEndPointY * 5 / 6;
    //设置小球的初始点
    mMovePointX = mStartPointX;
    mMovePointY = mStartPointY;
    //获得运动轨迹的高度
    mHeight = mEndPointY - mStartPointY;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

// //绘制小球的运动轨迹
// mHelpPath.reset();
// mHelpPath.moveTo(mStartPointX, mStartPointY);
// mHelpPath.lineTo(mEndPointX, mEndPointY);
// mHelpPath.close();
// canvas.drawPath(mHelpPath, mHelperPaint);

    //在下落到一定时刻存在椭圆效果
    int mDistance = mEndPointY - mMovePointY;
    if (mDistance >= mRadius) {
        canvas.drawCircle(mMovePointX, mMovePointY, mRadius, mHelperPaint);
    } else {
        //距离底端距离的碰撞比例
        float ratio = mDistance / mRadius;
        //将左右位置稍微拉伸一点,形成扁状效果
        RectF oval = new RectF(
                mMovePointX - mRadius - 2,
                mMovePointY - mRadius - ratio * mRadius + 5,
                mMovePointX + mRadius + 2,
                mMovePointY + mRadius - ratio * mRadius);
        canvas.drawOval(oval, mHelperPaint);
    }

    //绘制底部阴影(注意阴影也是椭圆)
    float downRatio = (mMovePointY - mStartPointY) / (float) mHeight;
    //在行驶路径后半段 出现阴影
    if (downRatio > 0.3) {
        RectF rectF = new RectF(
                mEndPointX - mRadius * downRatio,
                mEndPointY + 10,
                mEndPointX + mRadius * downRatio,
                mEndPointY + 15
        );
        canvas.drawOval(rectF, mPaint);
    }
}

@Override
public void onClick(View view) {
    //初始化动画
    ValueAnimator mStartAnim = ValueAnimator.ofInt(mStartPointY, mEndPointY);
    mStartAnim.setInterpolator(new AccelerateInterpolator(1.2f));
    mStartAnim.setDuration(500);
    mStartAnim.setRepeatCount(ValueAnimator.INFINITE);
    mStartAnim.setRepeatMode(ValueAnimator.REVERSE);
    mStartAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mMovePointY = (int) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    mStartAnim.start();
}


/**
 * 设置圆球的颜色
 */
public void setCircleColor() {
    if (null != mHelperPaint && null != colors) {
        mHelperPaint.setColor(colors[new Random().nextInt(6)]);
    }
}

}

4
0
查看评论

Android 属性动画:实现小球坠落

一、要做什么项目需要实现的效果:小球坠落 1. 首先绘制小球--自定义View 绘制圆; 2. 模拟小球坠落--属性动画,重绘小球轨迹; 3. 修改小球颜色--实现自定义TypeEvaluator; 实现的简单效果如下:二、思考怎么做实现步骤如下:1、自定义 AnimPointView:/**...
  • happy_horse
  • happy_horse
  • 2017-03-21 20:46
  • 1457

安卓垂直抖动动画,实现小球掉落弹起效果

实现方法: private void showShakeAnimation(final View view, final int y){ if(y>=0){ return; } TranslateAnimation anim = new Transla...
  • feiyu521808123
  • feiyu521808123
  • 2016-07-25 15:08
  • 465

Android具有粘性的小球,跌落反弹形成文字的动画效果

android自定义view是一个android开发者进阶的一个重要的里程碑,其实这也是离不开Animation,Animator,canvas,path,paint。下面通过一个自定义view,Ad hesiveLoadingView来进行自定义view的过程
  • u010360371
  • u010360371
  • 2016-01-26 23:14
  • 2436

安卓动画系列之属性动画实现跳起落下圆圈运动

最近看了淘宝手机端的有些页面是类似下面这个小球的加载效果。后来了解了下,淘宝是直接一个gif图片实现效果的,这当然是最简单的方法。为了加深了解属性动画,这次就做个类似的效果。这依旧由几个简单的属性动画组合在一起,所有动画都在代码里实现了。看注释就好。 上个效果图: 实现代...
  • stzy00
  • stzy00
  • 2015-03-22 23:14
  • 1131

Android动画之弹球落地效果

android:interpolator: 加速器
  • fly_xiaoba
  • fly_xiaoba
  • 2014-07-16 08:49
  • 1883

Android动画之旅(三)----6个小球移动的轨迹动画

动画组成:1.贝塞尔曲线和PathMeasure结合使用。2. mPathMeasure.getPosTan(float v,float [] pos ,float[] tan)的使用。3.通过动画0到1形成轨迹动画。package com.example.administrator.animati...
  • l540675759
  • l540675759
  • 2017-02-28 16:58
  • 1806

Android仿QQ邮箱下拉刷新动画(三个小球围绕中心转动)

仿QQ邮箱下拉刷新动画(三个小球围绕中心转动) 该动画的实现主要借鉴了海龙的博客- 两个小球不停的绕中心旋转的进度条 ,在此感谢下。 1 首先上图(折腾了好久才把gif给搞了上去)2 分析2.1 当我们看到一个动画,首先需要对动画的效果进行分析,而不是盲目的进行开发2.2 动画的分解(先需要关注...
  • u012950099
  • u012950099
  • 2016-06-27 22:45
  • 1207

【Android】弹跳的小球——SurfaceView

简单介绍: 用安卓实现的一个黑色全屏上,红色的小球的随机跳动,加速度越来越快。 采用surfaceview实现,在activity中设置为全屏,并将小球弹跳的surfaceview设置为显示的view,主要代码都在surfaceview中实现。 将小球的初始位置设置为屏幕的中央,将...
  • felicitia
  • felicitia
  • 2013-06-12 16:59
  • 3464

一个简单的方法实现购物车小球动画

只有代码,仔细看看,实现起来其实很简单 /** * 执行添加商品动画 * * @param goodsImg 动画小球 * @param position 所在列表中的位置 */ private void addGoodsToCart(Ima...
  • github_36713209
  • github_36713209
  • 2017-05-02 11:37
  • 504

Android动画之旅(四)----小球拟合动画

动画组成:1.通过三阶贝塞尔曲线来拟合圆,拟合系数的由来,以及怎么选控制点.2.利用画布canvas.translate,以及scale,rotate的方法,来渐变绘制的过程.3.熟悉拟合过程.4.不熟悉的话,先绘制辅助点的移动路线,对理解两个圆的分裂的拟合过程有好处. package com.ex...
  • l540675759
  • l540675759
  • 2017-02-28 16:59
  • 334
    个人资料
    • 访问:62841次
    • 积分:1244
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:0篇
    • 译文:3篇
    • 评论:123条
    博客专栏