扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么在Android中利用三阶贝塞尔曲线绘制运动轨迹?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:申请域名、网站空间、营销软件、网站建设、海勃湾网站维护、网站推广。
xml布局:
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 WeakReferenceui; 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; } }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流