关闭

【光能使者】!!!

228人阅读 评论(0) 收藏 举报
分类:

今天要分享的是PathMeasure的玩法。

首先我们来回顾一下童年吧~~90后满满的记忆

光能使者
光能使者

小时候总是幻想着自己能变身,今天我们就来用代码实现变身的第一步吧,动画绘制一个魔法阵magic_circle~~

magic_circle.jpg
magic_circle.jpg

静态图片比较容易,我们用 Path 设置好路径,然后再 canvas.drawPath 即可,但是静态的也太 low 了一点,我们要让它动起来。

实现效果:

magic_circle1.gif
magic_circle1.gif

效果看完了,不会写的童鞋肯定已经懵逼了,会的童鞋可以出门左拐了,因为实现实在太简单。

好了,在开始撸代码之前,我们先来学习一个类 PathMeasure。我们的光能使者阵就是是基于这个类的两个方法撸出来的。

PathMeasure

这个类的 class 注释就一个版权说明,酱紫~

Copyright.png
Copyright.png

踏马的,Google 工程师都偷懒了,注释都不写。。。幸好这个类只有一百多行代码,那我们就自己看吧

Public constructors

  • PathMeasure 创建一个空的 pathmeasure 对象
  • PathMeasure(Path path,boolean forceClosed)创建一个带 path 参数的 PathMeasure,forceClosed控制 path 是否自动闭合

Public methods

  • getLength() 返回当前 Path 的总长度。
  • getMatrix(float distance, Matrix matrix, int flags)
  • getPosTan(float distance, float[] pos, float[] tan)获取distance长度的 point 值给 pos,point 点的正切值给 tan。
  • getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) 获取 path 的一个片段,即startD到 stopD 的线段,辅助给 dst。
  • isClosed() 是否自动闭合
  • nextContour() 移动到下一条曲线。如果 path 中含有不连续的线条,getLength、getPosTan等方法之会在第一条线上运行,需要使用这个方法跳到第二条线
  • setPath(Path path, boolean forceClosed)

是不是很简单,就这么几个方法,现在去画光能使者阵有思路了么~~
接下来为了便于大家理解,我们再来简单回顾一下 path 的 api,因为静态的光能使者阵是需要 path 去绘制的。

Path

方法名 作用
moveTo 移动到指定点
setLastPoint 重新设置当前 Path 的最后一个点,如果当前 Path 为空,则等同上个方法
lineTo 添加当前点到一个指定点的直线
close 连接当前点到起点,形成闭合路径
addRect、addRoundRect、addOval、addCircle、addPath、addArc、arcTo 添加各种图形
isEmpty 是否为空
isRect 是否为矩形
set 用一个新的 path 替换
offset 对当前的路径进行偏移,不会影响后续操作
quadTo、cubicTo 贝塞尔曲线
rMoveTo、rLineTo、rQuaTo、rCubicTo 带 r 的是基于当前点的偏移量,不带 r 基于坐标原点
setFillType、getFillType 设置填充模式
transform 矩阵变换

就这样简单回顾一下吧,具体玩法可以参考 Hencoder 的 bolg【HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础】

动画拆解

好了,准备工作完成,我们开始撸代码

第一步,绘制静态的光能使者阵

首先绘制两个圆,然后就是中间的六角星(其实仔细看就是两个三角形)。
都是很简单的方法,同学们动手去画的时候可能会遇到一个这样的问题,就是三角形的三个点不好取。其实很简单,直接在圆上取0,1/3,2/3长度的点即可,刚刚我们不是说了 PathMeasure 的方法么,用getPosTan就可以实现。

第二步,让光能使者阵动起来

这里我们把这个动画效果分成三个阶段吧。

  • 第一阶段,绘制两个圆
step_1.gif

如上图所示,这里两个圆是慢慢绘制出来的, 圆的 path 很容易绘制出来,这里我就不讲了,然后PathMeasure的getLength可以获取 path 总的长度,getSegment可以获取某个点到某个点的 Path。因此一个 ValueAnimator 就可以解决从0到100%长度的过程,具体实现看后面的代码。
然后问题来了,path画出来的圆的起点在哪里?怎么控制两个圆开始绘制的角度不一样。有同学可能想到了旋转90°再画第二个圆,当然这种方式是可以实现的,但是由于后面的三角形也需要旋转,这里我们就不用 path 画圆了,用 path 添加一个正方形 Rect 的圆弧也是一个圆,然后我们的圆弧可以控制开始的角度,弧度。
然后变成这样了

erroe_1.gif


WTF?角度怎么不对了,我明明设置的开始角度的呀

innerCircle.addArc(innerRect, 150, -360);
outerCircle.addArc(outerRect, 60, -360);

最后有个大牛说你的圆变成闭环了,PathMeasure 找不到开始点,用了默认的。你把360度改成359.9让他不是一个闭环的圆就行了。

  • 第二阶段,两个点在圆里面弹射

step_2.gif

看起来好像还要干什么碰撞反弹之类的事,一副高科技的样子,其实不是的。

轨迹就是两个三角形,怎么让两条线跟着三角形走呢,而且走的时候还要不段变化长度。

刚刚第一步我们用 ValueAnimator 来控制一个圆从0到100%的过程,

pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);

不断截取起点到*%长度的 path 赋值给drawPath。

从里是从起点开始截取,那么我们不从起点开始截取,从当前点附近开始截取不就行了吗,哈哈哈哈~so easy

float stopD = distance * pathMeasure.getLength();
float startD = stopD - (0.5f - Math.abs(0.5f - distance)) * 200;
pathMeasure.getSegment(startD, stopD, drawPath, true);
酱紫~~

  • 第三阶段绘制两个三角形
step_3.gif

其实两个三角形就是第二步的运动轨迹,也是就是说直接用第阶段的 Path 即可,然后再用第一阶段一样的办法就可以实现效果。

代码实现

public class GranzortView extends View {

private Paint paint;

private Path innerCircle;//内圆 path
private Path outerCircle;//外圆 path
private Path trangle1;//第一个三角形的 Path
private Path trangle2;//第二个三角形的 Path
private Path drawPath;//用于截取路径的 Path

private PathMeasure pathMeasure;

private float mViewWidth;
private float mViewHeight;

private long duration = 3000;
private ValueAnimator valueAnimator;

private Handler mHanlder;

private float distance;//当前动画执行的百分比取值为0-1
private ValueAnimator.AnimatorUpdateListener animatorUpdateListener;
private Animator.AnimatorListener animatorListener;

private State mCurrentState = State.CIRCLE_STATE;

//三个阶段的枚举
private enum State {
    CIRCLE_STATE,
    TRANGLE_STATE,
    FINISH_STATE
}

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

public GranzortView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, 0);
}

public GranzortView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mViewWidth = w;
    mViewHeight = h;
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(getResources().getColor(R.color.colorPrimary));
    canvas.save();
    canvas.translate(mViewWidth / 2, mViewHeight / 2);
    switch (mCurrentState) {
        case CIRCLE_STATE:
            drawPath.reset();
            pathMeasure.setPath(innerCircle, false);
            pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
            canvas.drawPath(drawPath, paint);
            pathMeasure.setPath(outerCircle, false);
            drawPath.reset();
            pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
            canvas.drawPath(drawPath, paint);
            break;
        case TRANGLE_STATE:
            canvas.drawPath(innerCircle, paint);
            canvas.drawPath(outerCircle, paint);
            drawPath.reset();
            pathMeasure.setPath(trangle1, false);
            float stopD = distance * pathMeasure.getLength();
            float startD = stopD - (0.5f - Math.abs(0.5f - distance)) * 200;
            pathMeasure.getSegment(startD, stopD, drawPath, true);
            canvas.drawPath(drawPath, paint);
            drawPath.reset();
            pathMeasure.setPath(trangle2, false);
            pathMeasure.getSegment(startD, stopD, drawPath, true);
            canvas.drawPath(drawPath, paint);
            break;
        case FINISH_STATE:
            canvas.drawPath(innerCircle, paint);
            canvas.drawPath(outerCircle, paint);
            drawPath.reset();
            pathMeasure.setPath(trangle1, false);
            pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
            canvas.drawPath(drawPath, paint);
            drawPath.reset();
            pathMeasure.setPath(trangle2, false);
            pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
            canvas.drawPath(drawPath, paint);
            break;

    }

    canvas.restore();

}

private void init() {

    initPaint();

    initPath();

    initHandler();

    initAnimatorListener();

    initAnimator();

    mCurrentState = State.CIRCLE_STATE;
    valueAnimator.start();

}

private void initHandler() {
    mHanlder = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (mCurrentState) {
                case CIRCLE_STATE:
                    mCurrentState = State.TRANGLE_STATE;
                    valueAnimator.start();
                    break;
                case TRANGLE_STATE:
                    mCurrentState = State.FINISH_STATE;
                    valueAnimator.start();
                    break;
            }
        }
    };
}

private void initAnimatorListener() {
    animatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            distance = (float) animation.getAnimatedValue();
            invalidate();
        }
    };

    animatorListener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            Log.e("star:",mCurrentState+"_");
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            Log.e("end:",mCurrentState+"_");
            mHanlder.sendEmptyMessage(0);
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };
}

private void initAnimator() {
    valueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(duration);

    valueAnimator.addUpdateListener(animatorUpdateListener);

    valueAnimator.addListener(animatorListener);
}

private void initPath() {
    innerCircle = new Path();
    outerCircle = new Path();
    trangle1 = new Path();
    trangle2 = new Path();
    drawPath = new Path();

    pathMeasure = new PathMeasure();

    RectF innerRect = new RectF(-220, -220, 220, 220);
    RectF outerRect = new RectF(-280, -280, 280, 280);
    innerCircle.addArc(innerRect, 150, -359.9F);     // 不能取360f,否则可能造成测量到的值不准确
    outerCircle.addArc(outerRect, 60, -359.9F);

    pathMeasure.setPath(innerCircle, false);

    float[] pos = new float[2];
    pathMeasure.getPosTan(0, pos, null);        // 获取开始位置的坐标
    trangle1.moveTo(pos[0], pos[1]);
    pathMeasure.getPosTan((1f / 3f) * pathMeasure.getLength(), pos, null);
    System.out.println("pos : " + pos[0] + "  " + pos[1]);

    trangle1.lineTo(pos[0], pos[1]);
    pathMeasure.getPosTan((2f / 3f) * pathMeasure.getLength(), pos, null);
    trangle1.lineTo(pos[0], pos[1]);
    trangle1.close();

    pathMeasure.getPosTan((2f / 3f) * pathMeasure.getLength(), pos, null);
    Matrix matrix = new Matrix();
    matrix.postRotate(-180);
    trangle1.transform(matrix, trangle2);
}

private void initPaint() {
    paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.WHITE);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(10);
    paint.setStrokeCap(Paint.Cap.ROUND);
    paint.setStrokeJoin(Paint.Join.BEVEL);
    paint.setShadowLayer(15, 0, 0, Color.WHITE);//白色光影效果
}}

好,光能使者阵完成了,离变身成为光能使者只差喊口号和变身动作了,加油吧,有梦想的程序员。
最后,感觉小伙伴Moo_Night分享的光能使者阵。



作者:Anonymous___
链接:http://www.jianshu.com/p/4bb16cefca23


0
0
查看评论

Source引擎 光能传递和凹凸贴图的革命性结合(转载)

转自http://hi.baidu.com/vrman/blog/item/faba6881f6501cd8bc3e1e3b.htmlSource引擎 光能传递和凹凸贴图的革命性结合    新的理念:“光能传递”和“凹凸贴图”的有机结合,《半条命2》渲染的核心技术...
  • kongbu0622
  • kongbu0622
  • 2007-10-12 19:09
  • 3076

古龙群侠传主线剧情攻略

游戏开始后,师父会叫你准备准备下午和师兄莫天野比武。这时,师妹清兰会要你陪他去后山玩。答应与否会影响师妹对你的好感度。出村子,在村郊的右上方有路通往后山。进到后山山洞后,从左上方的通道可进到第二个山洞(右边也有一个通道,不过那要等到游戏最后才有用),在这里的左上方会遇到一条大蛇,击败它后就可以返回村...
  • ourgames
  • ourgames
  • 2005-03-07 09:16
  • 1512

光能传递

就是光的物理传播方式,光本来就是能量波,波本身就带有一定的能量,只有这样他才能在空间中进行传播,能量大小有光波的振幅决定.。   由于光是波,因此它也可以像其他波一样携带信息,光本身携带的信息是由它的频率和周期决定的,周期和频率不同的光携带的信息是不同的。
  • pizi0475
  • pizi0475
  • 2012-10-03 18:41
  • 513

末日使者

末日审判
  • u014692968
  • u014692968
  • 2014-04-19 13:22
  • 76

什么是光能传递?

曾经在视觉中国上有人问我什么是光能传递。我很好奇,在现在光能传递如此火热的时代竟然还有人连光能传递都不知道。   但小日本的广岛研究所在80年代研究光能传递的时候中国又有多少做三维动画的人知道呢?        我虽然痞,而数学、物理...
  • pizi0475
  • pizi0475
  • 2012-10-03 18:42
  • 1006

程序设计的使者

  • lantianyu622725
  • lantianyu622725
  • 2010-03-08 21:54
  • 201

净坛使者 是什么

Welcome to my blog!净坛使者 软件大小:2335 KB软件语言:简体中文软件类别:国产软件 / 共享版 / 浏览安全应用平台:Win9x/NT/2000/XP/2003界面预览:无插件情况: 投诉更新时间:2007-06-27 10:38...
  • maqian4848
  • maqian4848
  • 2007-07-27 22:27
  • 411

赛码网—在线编程(四)路灯

赛码网在线编程—路灯
  • cjs68
  • cjs68
  • 2016-11-23 19:49
  • 407

地狱的使者

    还记得《英雄儿女》中这样的镜头:   “……    他已经是战壕里最后一个人了。    战友们剩下的子弹都已经被他打光,只剩下最后一个爆破筒了。    ...
  • ediot
  • ediot
  • 2005-04-30 20:49
  • 629

护眼使者V5.0

该程序启动后,每隔45分钟会在桌面右下角弹出一个小图片,10秒钟之后,小图片自动消失。 马上弹出 一个全屏大图片(注意:会有背景音乐),大图片持续全屏5分钟之后,会自动消失,一直这样构成循环,在大图片全屏的时候,你可以起来活动一下或者做做眼保健操,达到保护眼睛的效果
  • qq_22239167
  • qq_22239167
  • 2016-12-02 11:18
  • 230
    个人资料
    • 访问:27376次
    • 积分:769
    • 等级:
    • 排名:千里之外
    • 原创:43篇
    • 转载:34篇
    • 译文:1篇
    • 评论:10条
    文章分类
    最新评论