android运动轨迹怎么画,Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例，分享给大家，具体如下：

实现点赞效果，自定义起始点以及运动轨迹

效果图：

xml布局：

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/rl_root"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="stone.wshh.com.touch.MainActivity">

android:layout_marginBottom="100dp"

android:layout_marginRight="15dp"

android:id="@+id/love_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/bt_bottom"

android:text="begin"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="20dp"

android:layout_width="100dp"

android:layout_height="50dp" />

MainActivity类：

public class MainActivity extends Activity implements View.OnClickListener{

private Button btBottom;

// private WaitNoticeDialog dialog;

// public Handler handler;

private MyLoveLayout love;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

btBottom = (Button) findViewById(R.id.bt_bottom);

love = (MyLoveLayout) findViewById(R.id.love_layout);

btBottom.setOnClickListener(this);

// handler=new IHandler(this);

// dialog = new WaitNoticeDialog(this);

}

static class IHandler extends Handler {

private WeakReference ui;

IHandler(MainActivity ui) {

this.ui = new WeakReference(ui);

}

@Override

public void handleMessage(Message msg) {

if(ui!=null&&ui.get()!=null){

ui.get().handleMsg(msg);

}

}

}

/**

* 线程消息处理

* @param msg

*/

public void handleMsg(Message msg){

switch (msg.what) {

}

}

@Override

public void onClick(View v) {

switch (v.getId()){

case R.id.bt_bottom:

love.addHeart();

break;

}

}

@Override

protected void onDestroy() {

super.onDestroy();

// handler.removeCallbacksAndMessages(null);

}

}

自定义view：MyLoveLayout

public class MyLoveLayout extends RelativeLayout {

private Drawable[] drawables;

private Interpolator[] mInterpolators;

private int dWidth, mWidth;

private int dHeight, mHeight;

private LayoutParams lp;

private Random random = new Random();

public MyLoveLayout(Context context, AttributeSet attrs) {

super(context, attrs);

//imageView位置是相对于MyLoveLayout

init();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

//得到本布局的宽高

mWidth = getMeasuredWidth();

mHeight = getMeasuredHeight();

}

private void init() {

// 初始化显示的图片

drawables = new Drawable[7];

drawables[0] = getResources().getDrawable(R.drawable.heart_1);

drawables[1] = getResources().getDrawable(R.drawable.heart_2);

drawables[2] = getResources().getDrawable(R.drawable.heart_3);

drawables[3] = getResources().getDrawable(R.drawable.heart_4);

drawables[4] = getResources().getDrawable(R.drawable.heart_5);

drawables[5] = getResources().getDrawable(R.drawable.heart_6);

drawables[6] = getResources().getDrawable(R.drawable.heart_7);

// 初始化插补器

mInterpolators = new Interpolator[4];

mInterpolators[0] = new LinearInterpolator();// 线性

mInterpolators[1] = new AccelerateInterpolator();// 加速

mInterpolators[2] = new DecelerateInterpolator();// 减速

mInterpolators[3] = new AccelerateDecelerateInterpolator();// 先加速后减速

// 获取图片宽高

// dWidth = drawables[0].getIntrinsicWidth();

// dHeight = drawables[0].getIntrinsicHeight();

//手动设置宽高

dWidth = dip2px(getContext(), 40);

dHeight = dip2px(getContext(), 40);

lp = new LayoutParams(dWidth, dHeight);

//设置view控件的起始位置

// lp.addRule(CENTER_HORIZONTAL, TRUE);// 这里的TRUE 要注意 不是true

lp.addRule(ALIGN_PARENT_RIGHT, TRUE);

lp.addRule(ALIGN_PARENT_BOTTOM, TRUE);

}

/**

* dp转px值

*/

private int dip2px(Context context, float dpValue) {

float scale = context.getResources().getDisplayMetrics().density;

return (int) (dpValue * scale + 0.5f);

}

/**

* 进场动画，三种同时播放

* alpha透明度 (80%-0%)

* scaleX 宽度 target(20%-100%)

* scaleY 高度

* @param target

* @return

*/

private AnimatorSet getEnterAnimator(final View target) {

ObjectAnimator alpha = ObjectAnimator.ofFloat(target, View.ALPHA, 0.2f, 1f);

ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, View.SCALE_X, 0.2f, 1f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, View.SCALE_Y, 0.2f, 1f);

AnimatorSet enter = new AnimatorSet();

enter.setTarget(target);

enter.setInterpolator(new LinearInterpolator());

enter.setDuration(500).playTogether(alpha, scaleX, scaleY);

return enter;

}

private ValueAnimator getBezierValueAnimator(final View target) {

// 初始化贝塞尔估值器

//随机产生两个点，以确定一条3阶贝塞尔曲线

BezierEvaluator evaluator = new BezierEvaluator(getPointF(2), getPointF(1));

// 起点在底部中心位置，终点在底部随机一个位置，改变new PointF()中值来改变起始位置

// ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF((mWidth - dWidth) /

// 2, mHeight - dHeight), new PointF(random.nextInt(getWidth()), 0));

// 起点在右下角位置，终点在左上角位置

ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF(mWidth - dWidth, mHeight - dHeight), new PointF(0, 0));

animator.setTarget(target);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

// 这里获取到贝塞尔曲线计算出来的的x y值 赋值给view 这样就能让爱心随着曲线走啦

PointF pointF = (PointF) valueAnimator.getAnimatedValue();

target.setX(pointF.x);

target.setY(pointF.y);

// alpha动画，根据运动距离改变透明度

// target.setAlpha(1 - valueAnimator.getAnimatedFraction());

target.setAlpha(1 - valueAnimator.getAnimatedFraction() + 0.3f);

}

});

animator.setDuration(3000);

return animator;

}

private PointF getPointF(int i) {

PointF pointF = new PointF();

//pointF.x,pointF.y都是随机，因此可以产生n多种轨迹

pointF.x = random.nextInt(mWidth);//0~loveLayout.Width

//为了美观,建议尽量保证P2在P1上面,那怎么做呢??

//只需要将该布局的高度分为上下两部分,让p1只能在下面部分范围内变化(1/2height~height),让p2只能在上面部分范围内变化(0~1/2height),因为坐标系是倒着的;

//0~loveLayout.Height/2

if (i == 1) {

pointF.y = random.nextInt(mHeight / 2) + mHeight / 2;//P1点Y轴坐标变化

} else if (i == 2) {//P2点Y轴坐标变化

pointF.y = random.nextInt(mHeight / 2);

}

// 写死的一条轨迹

// if (i == 1) {

// pointF.x=mWidth-dWidth*2;

// pointF.y = 3*dHeight;

// } else if (i == 2) {

// pointF.x=dWidth*2;

// pointF.y = mHeight -dHeight;

// }

return pointF;

}

public void addHeart() {

final ImageView imageView = new ImageView(getContext());

// 随机选一个爱心

imageView.setImageDrawable(drawables[random.nextInt(6)]);

imageView.setLayoutParams(lp);

addView(imageView);

AnimatorSet finalSet = new AnimatorSet();

AnimatorSet enterAnimatorSet = getEnterAnimator(imageView);//入场动画

ValueAnimator bezierValueAnimator = getBezierValueAnimator(imageView);//贝塞尔曲线路径动画

finalSet.playSequentially(enterAnimatorSet, bezierValueAnimator);

// finalSet.playSequentially(bezierValueAnimator);

finalSet.setInterpolator(mInterpolators[random.nextInt(4)]);

finalSet.setTarget(imageView);

finalSet.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

removeView((imageView));//删除爱心

}

});

finalSet.start();

}

}

贝塞尔估值器:BezierEvaluator

public class BezierEvaluator implements TypeEvaluator {

private PointF mControlP1;

private PointF mControlP2;

public BezierEvaluator(PointF controlP1, PointF controlP2) {

this.mControlP1 = controlP1;

this.mControlP2 = controlP2;

}

@Override

public PointF evaluate(float time, PointF start, PointF end) {

float timeLeft = 1.0f - time;

PointF point = new PointF();

point.x = timeLeft * timeLeft * timeLeft * (start.x) + 3 * timeLeft * timeLeft * time *

(mControlP1.x) + 3 * timeLeft * time *

time * (mControlP2.x) + time * time * time * (end.x);

point.y = timeLeft * timeLeft * timeLeft * (start.y) + 3 * timeLeft * timeLeft * time *

(mControlP1.y) + 3 * timeLeft * time *

time * (mControlP2.y) + time * time * time * (end.y);

return point;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。