Giter VIP home page Giter VIP logo

fishanimator's Introduction

FishAnimator

Android 自定义鱼游动

效果图

锦鲤动画

实现步骤:

  1. 实现小鱼的绘制
  2. 实现小鱼的原地摆动
  3. 实现小鱼点击游动

image

分解图

Drawable

Drawable是什么?

  1. 一种可以在 Canvas 上进行绘制的抽象的概念
  2. 颜色、图片等都可以是一个 Drawable
  3. Drawable 可以通过XML定义,或者通过代码创建
  4. Android 中 Drawable 是一个抽象类,每个具体的 Drawable 都是其子类

Drawable的优点:

  1. 使用简单,比自定义View成本低
  2. 非图片类的Drawable所占空间小,能减小apk大小

Drawable 重写方法

image

image

image

image

image

Paint

image

Path

image

Canvas

鱼各个部分比例计算宽高

三角函数计算坐标

三角函数图

image

鱼鳍坐标计算方式

属性动画(ValueAnimator)

  1. ValueAnimator 没有重绘,所以需要自己调用addUpdateListener方法,需要结合AnimatorUpdateListener使用。

  2. 操作的对象的属性不一定要有getter和setter方法。

  3. 默认插值器为AccelerateDecelerateInterpolator

image

属性动画(ObjectAnimator)

继承自 ValueAnimator,相对于 ValueAnimatior,可以直接操作控件。

原理:通过改变 View 的属性值来改变控件的形态,说白了就是通过反射技术来获取控件的一些属性如 alpha、scaleY 等的 get 和 set 方法,从而实现所谓的动画效果。所以,这就需要我们的 View (如自定义 View 中)具有 set 和 get 方法,如果没有则会导致程序的 Clash 。

具体步骤:

  1. 首先,系统通过 get 方法获得属性值
  2. 系统在时间插值器的作用下,变更属性值
  3. 系统调用 set 方法,将属性值重新赋予控件
// 透明度动画 --- 需要有 setAlpha,getAlpha 方法
ObjectAnimator.ofFloat(ivFish, "alpha", 1, 0, 1)
            .setDuration(4000)
            .start();

鱼的游动路线

  1. 利用头部圆心、鱼身的重心以及点击点坐标来唯一确定一个特征三角形。
  2. 确定鱼身需要向左还是向右转弯,知道三角形内角 AOB 的大小,就知道转动的方向了

向量夹角计算

向量的夹角公式计算夹角cosAOB = (OAOB)/(|OA||OB|)其中OA*OB是向量的数量积,计算过程如下:

OA=(Ax-Ox,Ay-Oy) OB=(Bx-Ox,By-Oy) OAOB=(Ax-Ox)(Bx-Ox)+(Ay-Oy)(By-Oy) |OA|表示线段OA的模即OA的长度

image

image

image

PathMeasure

mPathMeasure.getPosTan(float distance, float pos[], float tan[]),参数信息:

  • distance : 这个参数就是确定要获取路径上哪个位置的点

  • pos[] :根据distance返回点的坐标信息并保存在传入的pos[]内, X保存在pos[0], Y则在pos[1]

  • tan[] : 根据distance返回点的角度信息并保存传入tan[]内 ,主要结合float degree = (float) (Math.atan2(mTan[1], mTan[0]) * 180 / Math.PI);

fishanimator's People

Contributors

wuchao226 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.