自定义Bezier动画和抖动动画的实现

最新推荐文章于 2021-01-18 06:40:14 发布
最新推荐文章于 2021-01-18 06:40:14 发布
阅读量374 收藏
点赞数
分类专栏： android 文章标签： 贝塞尔 Bezier
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengmengjia/article/details/74928841
版权

别的先不说了，先上效果：



之前看到很多贝塞尔的动画效果，都很漂亮，之前有需要用到类似的效果，就先写了下来。

在百度搜索了下， 公式是这样子的：

二次方公式

二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：

我也就照着公式 ，来一个简单的代码： 

package com.mj.animapp.anim;

import android.annotation.SuppressLint;
import android.graphics.PointF;

import com.nineoldandroids.animation.TypeEvaluator;

@SuppressLint("NewApi")
public class BezierEvaluatorBear implements TypeEvaluator<PointF> {

	/**
	 * 二次方贝塞尔曲线 B(t)=(1-t)^2*P0+2*t*(1-t)*P1+t^2*P2,t∈[0,1] P0,是我们的起点, P2是终点,
	 * P1是途径的点 而t则是我们的一个因子,取值范围是0-1
	 */
	private PointF pointF1;// 中间的点

	public BezierEvaluatorBear(PointF pointF1) {
		this.pointF1 = pointF1;
	}

	/**
	 * 开始和结束的点,这个公式是固定
	 */
	@Override
	public PointF evaluate(float fraction, PointF pointF0, PointF pointF2) {
		PointF pointF = new PointF();
		pointF.x = (float) ((pointF0.x * (Math.pow((1 - fraction), 2))) + 2
				* pointF1.x * fraction * (1 - fraction) + pointF2.x
				* Math.pow(fraction, 2));
		pointF.y = (float) ((pointF0.y * (Math.pow((1 - fraction), 2))) + 2
				* pointF1.y * fraction * (1 - fraction) + pointF2.y
				* Math.pow(fraction, 2));

		return pointF;
	}

}


公式是实现了 ， 但是怎么实现整个动画的过程呢？ 

也是同样的先上代码：

 @OnClick(R.id.llLeftRate)
    public void llLeftRateOnlick(View view) {
        int[] starRect = new int[2];
        ivBean.getLocationOnScreen(starRect);
        int[] endRect = new int[2];
        rlZhangBean.getLocationOnScreen(endRect);
        int starx = starRect[0];
        int stary = starRect[1] - statusBarHeight;
        int endx = 0;
        int endy = 0;
        for (int i = 0; i < ANMIBEANCOUNT; i++) {
            endx = endRect[0]
                    + (int) (Math.random() * (rlZhangBean.getWidth() + 1));
            endy = (endRect[1] - statusBarHeight)
                    + (int) (Math.random() * (rlZhangBean.getHeight() + 1));
            mAnmiView.addBezierView(new PointF(starx, stary),
                    new PointF(endx - 50, endy + 100), new PointF(endx,
                            endy));
        }
        ObjectAnimator objAnim = rotationAnim(llLeftRate, 1f);
        objAnim.setStartDelay(1000);
        objAnim.start();
    }

在这个点击事件中我们可以看出，要执行整个动画我们需要   开始的位置 p0， 中间幅度的位置 p1， 结束的位置p2。 

怎么生成很多个小豆子呢， 就是使用自定义Layout ， addview后，执行自定义的动画。看一下源码大家就会明白很多了。 
   public void addBezierView(PointF pointStart, PointF pointMid, PointF pointEnd) {
        this.pointStart = pointStart;
        this.pointMid = pointMid;
        this.pointEnd = pointEnd;

        this.pointMid.set(pointMid.x + mWidth / 2, pointMid.y - mHeight);
        this.pointEnd.set(pointEnd.x - mWidth / 2, pointEnd.y - mHeight);
        ImageView view = new ImageView(getContext());
        int nextInt = mRandom.nextInt(loves.length - 1);
        view.setImageDrawable(loves[nextInt]);

        view.setLayoutParams(mParams);
        addView(view);
        ViewCompat.setX(view, pointStart.x);
        ViewCompat.setY(view, pointStart.y);
        AnimatorSet matorSet = getAnimatorSet(view);
        // 设置插补器.
        matorSet.setInterpolator(new AccelerateDecelerateInterpolator());
        matorSet.start();
    }

 顺便说下，怎么实现不同的位置显示不同的效果呢?  
       // 给动画添加一个动画的进度监听;在动画执行的过程中动态的改变view的位置;
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF pointF = (PointF) animation.getAnimatedValue();
                ViewCompat.setX(view, pointF.x);
                ViewCompat.setY(view, pointF.y);
                if (animation.getAnimatedFraction() <= 0.6f) {
                    ViewCompat.setScaleX(view,
                            0.6f + animation.getAnimatedFraction());
                    ViewCompat.setScaleY(view,
                            0.6f + animation.getAnimatedFraction());
                } else {
                    ViewCompat.setScaleX(view,
                            1.2f - (animation.getAnimatedFraction() - 0.6f));
                    ViewCompat.setScaleY(view,
                            1.2f - (animation.getAnimatedFraction() - 0.6f));
                }
                // 设置view的透明度,达到动画执行过程view逐渐透明效果;
            }
        });

这个地方使用了放大缩小，来尝试实现有点3d效果的抛物线。

最后说明下，最后面的抖动效果我使用了nineoldandroid 来实现抖动的效果 

 public ObjectAnimator rotationAnim(View view, float shakeFactor) {

        PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofKeyframe(
                "scaleX",
                Keyframe.ofFloat(0f, 1f),
                Keyframe.ofFloat(.1f, .9f),
                Keyframe.ofFloat(.2f, .9f),
                Keyframe.ofFloat(.3f, 1.0f),// 1.1f
                Keyframe.ofFloat(.4f, 1.0f), Keyframe.ofFloat(.5f, 1.0f),
                Keyframe.ofFloat(.6f, 1.0f), Keyframe.ofFloat(.7f, 1.0f),
                Keyframe.ofFloat(.8f, 1.0f), Keyframe.ofFloat(.9f, 1.0f),
                Keyframe.ofFloat(1f, 1f));

        PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofKeyframe(
                "scaleY", Keyframe.ofFloat(0f, 1f), Keyframe.ofFloat(.1f, .9f),
                Keyframe.ofFloat(.2f, .9f), Keyframe.ofFloat(.3f, 1.0f),
                Keyframe.ofFloat(.4f, 1.0f), Keyframe.ofFloat(.5f, 1.0f),
                Keyframe.ofFloat(.6f, 1.0f), Keyframe.ofFloat(.7f, 1.0f),
                Keyframe.ofFloat(.8f, 1.0f), Keyframe.ofFloat(.9f, 1.0f),
                Keyframe.ofFloat(1f, 1f));

        PropertyValuesHolder pvhRotate = PropertyValuesHolder.ofKeyframe(
                "rotation", Keyframe.ofFloat(0f, 0f),
                Keyframe.ofFloat(.1f, -3f * shakeFactor),
                Keyframe.ofFloat(.2f, -3f * shakeFactor),
                Keyframe.ofFloat(.3f, 3f * shakeFactor),
                Keyframe.ofFloat(.4f, -3f * shakeFactor),
                Keyframe.ofFloat(.5f, 3f * shakeFactor),
                Keyframe.ofFloat(.6f, -3f * shakeFactor),
                Keyframe.ofFloat(.7f, 3f * shakeFactor),
                Keyframe.ofFloat(.8f, -3f * shakeFactor),
                Keyframe.ofFloat(.9f, 3f * shakeFactor),
                Keyframe.ofFloat(1f, 0));

        return ObjectAnimator.ofPropertyValuesHolder(view, pvhScaleX,
                pvhScaleY, pvhRotate).setDuration(1000);
    }

这个项目目前已经我已经放在github 上 ，欢迎大家star
点击打开链接https://github.com/zasdsd/BezierAmin


郑梦佳
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VC++学习札记：使用Direct2D绘制Bezier线
weixin_48341920的博客
10-29 507
以前在VC++中绘图，使用的是GDI，绘制Bezier线D2D更好一些，D2D绘制简单图形是直接渲染的，绘制贝赛线等复杂图形是先创建Path，然后再渲染。
Android实现抖动动画
01-15 2100
使用动画让控件实现抖动，其实就是让横移（可心混合其它类型旋转等一起）的动画循环播放，使用Interpolator类来实现。 原理很简单，不多说了，代码如下： Activity代码： this.btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View v
（C#）贝塞尔曲线画水滴
意琦行的博客
06-08 4798
protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics g = e.Graphics; Point p1 = new Point(50, 200); Point p2 = new Poi
史上最全的贝塞尔曲线(Bezier)全解(三):贝塞尔曲线实现满屏爱心
sangxiaonian的博客
07-21 7687
这一篇文章会完整的介绍如何通过贝塞尔曲线实现爱心点赞的效果,如果实在看不懂,可以看第一篇贝塞尔曲线的简介,还有第二篇安卓中的简单使用;好了,终于到了放大招的时候了,真实憋了很久了 先做一些准备工作,绘制各种颜色的红心: private Bitmap creatHeart(int color) { int width = bitmap.getWidth(); int h
利用GDI+、贝塞尔曲线绘制一个带曲线的矩形
ZeroCode
03-27 2501
第一次发博客而且目前水平有限，就发个今天写的小函数吧，希望对新手有帮助！ void CGDIPlusTestDlg::DrawBigRectGraph(CDC* pDC, CRect& rc) { const int splitHeigtSeg = 8; const int splitWidthSeg = 5; Graphics graphics(pDC->G
android抖动动画_Android进阶：自定义动画的音频抖动效果
weixin_42393576的博客
01-18 263
自定义动画效果——音频抖动效果绘制一个矩形：想要绘制一个矩形，继承View，并重写onDraw方法即可。复杂一点还可以重写onMeasure方法和onLayout方法进行大小测量和位置测量。但本文不打算写那么复杂的view，故只需要重写一个onDraw方法即可：private RectF rectF = new RectF();//绘制矩形 private float lineWidth ...
Bezier曲线的绘制
小羊快跑的专栏
06-17 4249
曲线介绍 贝赛尔曲线的每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。它是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。二十世纪六十年代晚期，Pierre Bézier应用数学方法为雷诺公司的汽车制造业描绘出了贝塞尔曲线。 曲线的绘制 通过以下两个java文件，实现给定控制
用户控件添加贝塞尔 曲线不显示问题
farmwang的专栏
09-02 1731
在应用过程中 在添加              Region myRegion = new Region(ppath);         this.Region = myRegion;      时有时控件不显示 主要是可能单条曲线需要闭包 我们可以扩充闭包区间即可解决。 g = this.CreateGraphics();                        
自定义动画框架 demo
10-05
安卓动画框架，http://blog.csdn.net/qq_18983205/article/details/78157447对应代码
opengl动态显示贝塞尔曲线
11-23
opengl动态显示贝塞尔曲线，动画展示贝塞尔曲线四个控制点对曲线的控制。
BezierAnimation:使用Bezier的Android Arc动画
05-10
贝塞尔动画 使用贝塞尔曲线的Android arc动画。
Android绘制贝塞尔曲线
梦翼-的博客
05-12 4554
一、背景 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线。 利用贝塞尔曲线，我们可以更平滑的画出手势操作的轨迹，然后实现像橡皮檫等功能 n阶贝兹曲线可如下推断。给定点P0、P1、…、Pn，其贝兹曲线即： t 值的计算方式为：j/(N)，N代表要生成的贝塞尔点个数，控制点的数量是n...
贝塞尔曲线 基本使用
学到老
12-08 1680
项目中需要统计数据展现, 采用了饼图形式展现.如下图所示:一、了解贝塞尔曲线相关概念贝塞尔曲线相关概念:UIBezierPath ：画贝塞尔曲线的path类UIBezierPath定义 ： 贝赛尔曲线的每一个顶点都有两个控制点，用于控制在该顶点两侧的曲线的弧度。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。 滑动两个中间点，贝塞尔曲线的形状会发生变化。UIBezierPa
Unity -- Bezier曲线(创建/编辑工具)
humanerr的博客
04-03 2139
利用unity自带的LineRenderer组件创建/编辑曲线.[Editor – BezierEditor.cs] 文件放在”Assets/Editor”目录下.using System.Collections; using System.Collections.Generic; using UnityEditor; using UnityEngine;[CustomEditor(typeof(
使用贝塞尔曲线算法实现毛笔签名效果
ONGYUNHAI的博客
05-09 7958
最近项目中有个需要签名的地方，要用到手写签名，开始只是简单的实现手写签名，如图： 后来领导说，能不能实现像毛笔那样签名的效果，那好吧，领导说怎样就怎样吧，而且我也觉得这里用毛笔效果会更好些。那就只好运用贝塞尔曲线的原理了。实现如下：/** * This view implements the drawing canvas. * * It handles all of
一条会跳动的贝塞尔曲线
阿甘正传
03-22 822
贝塞尔曲线和属性动画实现一根会跳动的线。
Android酷炫实用的开源框架（UI框架）
热门推荐
fancychendong的专栏
05-17 27万+
Android酷炫实用的开源框架（UI框架）前言忙碌的工作终于可以停息一段时间了，最近突然有一个想法，就是自己写一个app，所以找了一些合适开源控件，这样更加省时，再此分享给大家，希望能对大家有帮助，此博文介绍的都是UI上面的框架，接下来会有其他的开源框架（如：HTTP框架、DB框架）。1.Side-Menu.Android 分类侧滑菜单，Yalantis 出品。 项目地址：https://gith
c++实现bezier动画
最新发布
05-16
贝塞尔曲线可以用于创建平滑的动画效果。以下是一个简单的C++实现bezier动画的示例代码： ```c++ #include <iostream> #include <cmath> #include <vector> using namespace std; // 二维向量 struct Vector2D { float x; float y; }; // 计算组合数 int Combination(int n, int k) { int result = 1; for (int i = 1; i <= k; ++i) { result *= (n - i + 1); result /= i; } return result; } // 计算Bezier曲线上的点 Vector2D BezierCurve(vector<Vector2D>& control_points, float t) { Vector2D result = { 0, 0 }; int n = control_points.size() - 1; for (int i = 0; i <= n; ++i) { float factor = Combination(n, i) * pow(t, i) * pow(1 - t, n - i); result.x += control_points[i].x * factor; result.y += control_points[i].y * factor; } return result; } int main() { // 控制点 vector<Vector2D> control_points = { { 100, 100 }, { 200, 50 }, { 300, 200 }, { 400, 150 } }; // 计算Bezier曲线上的点并输出 for (float t = 0; t <= 1; t += 0.1f) { Vector2D point = BezierCurve(control_points, t); cout << "(" << point.x << ", " << point.y << ")" << endl; } return 0; } ``` 在这个示例中，我们定义了一个二维向量结构体`Vector2D`，用于表示控制点和Bezier曲线上的点。然后定义了`Combination`函数，用于计算组合数。最重要的是`BezierCurve`函数，它接受一个控制点向量和一个参数`t`，并返回Bezier曲线上的点。 我们在`main`函数中定义了四个控制点，并调用`BezierCurve`函数来计算Bezier曲线上的点。在这个例子中，我们使用了一个简单的循环，从0到1递增t，每0.1个单位调用一次`BezierCurve`函数，并输出结果。 这只是一个简单的示例，你可以根据自己的需要更改控制点和步长，以创建平滑的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值