美文网首页
学习动画

学习动画

作者: 我妈叫我二乖 | 来源:发表于2017-06-29 19:17 被阅读36次

最近又开始学习动画了,隔一段时间就想着学习一下,对于动画绝对是真爱。

效果图:

path.gif
package com.example.sunxiaokun.studypath.activity;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.Point;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;

import com.example.sunxiaokun.studypath.R;
import com.example.sunxiaokun.studypath.myview.CircleEvaluator;
import com.example.sunxiaokun.studypath.myview.DrawCircleView;
import com.example.sunxiaokun.studypath.myview.StudyPathView;

public class StudyPaintActivity extends AppCompatActivity {

    private FrameLayout mStudy_ll_parent;
    private DrawCircleView mDrawCircleView;
    private StudyPathView mStudyPathView;
    private ValueAnimator mValueAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_study_paint);

        mStudy_ll_parent = (FrameLayout) findViewById(R.id.study_ll_parent);
        mStudyPathView = new StudyPathView(this);
        mDrawCircleView = new DrawCircleView(this);
        mStudy_ll_parent.addView(mStudyPathView);
        mStudy_ll_parent.addView(mDrawCircleView);

        Point fromPoint = new Point(0 , 0);
        Point endPoint = new Point(200 , 0);
        Point controllPoint = new Point(100, 100);


        //二阶贝塞尔曲线
        mValueAnimator = ValueAnimator.ofObject(new CircleEvaluator(controllPoint),fromPoint,endPoint);
        mValueAnimator.setDuration(3000);
        mValueAnimator.start();
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Point point = (Point) animation.getAnimatedValue();
                mDrawCircleView.setX(point.x);
                mDrawCircleView.setY(point.y);
            }
        });
        mValueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                modifyAnimator(mDrawCircleView, "translationY", 0,100,2);
            }
        });

    }


    /**
     * 平移
     * @param view
     * @param xy
     * @param from
     * @param end
     * @param count
     */
    public void modifyAnimator(View view, String xy, int from , int end, final int count){

        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, xy, from, end);
        objectAnimator.setDuration(2000);
        objectAnimator.start();
        objectAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                if(count == 3){
                    modifyAnimator(mDrawCircleView, "translationY", 100,0,4);
                }else if(count == 2){
                    modifyAnimator(mDrawCircleView, "translationX", 200,0,3);
                }else if(count == 4){
                    mValueAnimator.start();
                }

            }
        });

    }

}

package com.example.sunxiaokun.studypath.myview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by xxx on 2017/6/29.
 */

public class DrawCircleView extends View {

    private Paint mPaint;

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

    public DrawCircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
        mPaint.setStrokeWidth(2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100,100,3, mPaint);
    }
}

package com.example.sunxiaokun.studypath.myview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by sunxiaokun on 2017/6/29.
 */

public class StudyPathView extends View {

    private Paint mPaint;
    private Path mPath;

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

    public StudyPathView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();

    }

    private void init() {

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStrokeWidth(1);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.GRAY);

        mPath = new Path();
        mPath.moveTo(100,100);
        mPath.quadTo(200, 200, 300,100);
        mPath.lineTo(300,200);
        mPath.lineTo(100,200);
        mPath.close();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }
}

相关文章

  • iOS-动画知识梳理

    学习及实践笔记 记录iOS动画的学习及实践 目录 显示层(UIView)动画初级动画关键帧动画逐帧动画Gif动画的...

  • iOS动画原理学习

    iOS动画原理学习 iOS动画原理学习

  • 《Android 动画》补间动画

    关于 Android 的动画学习可以分为以下几个大类:逐帧动画补间动画(也说 View 动画)属性动画转场动画这里...

  • Android 逐帧动画

    关于 Android 的动画学习可以分为以下几个大类:逐帧动画补间动画(也说 View 动画)属性动画转场动画这里...

  • Android开发学习——Day24(火焰燃烧和蒙眼解锁界面&动

    学习目的 1.学习使用两类动画:关键帧动画和补间动画 2.运用上述两类动画进行实战练习:火焰燃烧和蒙眼睛解锁 学习...

  • 学习动画

    最近又开始学习动画了,隔一段时间就想着学习一下,对于动画绝对是真爱。 效果图:

  • 动画学习

    动画 分为 组动画,属性动画,渐变动画,其中属性动画包括 普通动画和关键帧动画,其他动弹动画,动画层分为 pres...

  • 动画学习

    7、html5tricks: http://www.html5tricks.com/ 网站里有很多前端实现的功能,...

  • manim学习

    动画库Manim学习笔记——安装与环境配置(一)动画库Manim学习笔记——Manim库的基本结构(二)动画库Ma...

  • 1. 控制动画

    《iOS编程》第27章 控制动画 学习笔记 基础动画 关键帧动画

网友评论

      本文标题:学习动画

      本文链接:https://www.haomeiwen.com/subject/swcvcxtx.html