一条固定长度且颜色渐变的线条沿着另一条固定形状的曲线滑动,这个动画的实现思路有哪些??

Android · rango____ · 于 发布 · 最后由 alittlecup回复 · 570 次阅读
96

动画:如,一个带圆角的矩形,这时候一条固定长度且颜色渐变的线条,沿着这个矩形边缘旋转,且速度是变化的,水平方向匀速,向上减速,向下加速。
请问:这个动画的实现思路有哪些?

共收到 18 条回复
2
jixiaohua · #1 ·

我猜想你说的是以下图中说的第二种情况,水平方向匀速,我理解应该是在矩形的四条边都匀速对吧。

我觉得这个动画需要拆解两个方面:
1、直线其实就是无数个点在运动,也可以看成是一个点在运动
2、运动轨迹分为两个部分,一个是直线的+一个是圆角的

96
rango____ · #2 ·

1、重新描诉一下这个动画:

一条线绕着一个矩形旋转:
具有如下特点:a. 这条线是颜色渐变的,长度固定的,而且这条线在绕圆角的时候,也是会绕着圆角走,会弯曲的;
b. 这个矩形是有圆角的;
c. 速度是渐变的,如图:A、C是水平方向的,匀速; B、D是竖直方向,B是竖直向下的,所以应该是自由落体运动,是加速的,D 是竖直向上的,由于自身重力,所以应该是减速的。

2、你说的把直线看成是无数点在运动,那我画线的时候,是不是要画无数个点来组成一条线??其实这个方法我试过,可以在画圆角的时候,相邻两个点之间存在很小的间隙,而且线的粗细不一样,可能是我点分的不够多(我用的是int);而且如果是这样的那这条线的颜色就很麻烦了,每个点的颜色都不一样

96

#2楼 @rango____

用Path.line连接起来就不会有间隙了。圆角直接走Path.arcTo。颜色的话,对paint设置线性渐变的shader即可。如果有转折,就分多段画,设多次shader。

96

可以做,问题是,上下水平时都是匀速运动,但是速度是不会相同的,因为右侧减速,左侧减速,上面匀速应该会比下面的快,用PathMeasure

96

初样,使用的也没有什么高深的技术,主要是思路,用的PathMeasure,画两个圆角矩形,然后截取固定长度路径,同时也能获得截取后路径的起始点和终点,渐变色的问题也解决了,至于说速度的变化,现在只有一个加减速, 懒的自己写插值器,能写插值器还是写插值器,不能写插值器就直接写四个animator,应该也可以

96
rango____ · #6 ·

ok ,谢谢各位

96
rango____ · #7 ·

#5楼 @alittlecup
可是在截取路径的时候:pathMeasure.getSegment(start, stop, dstPath, true)中的stop不能超过length啊,所以我准备把截取的部分分成两段path来画;我想问一下你是怎么解决这个的???

96

#7楼 @rango____ pathMeasure.getSegment这个方法会把截取的路径放到dstPath中,如果截取两次的话,则会把两次的路径连起来,这么说有思路了吗?更明确的说就是,截取两端,一段是距离终点的,一段是从起点开始,余下距离的

96
rango____ · #9 ·

实现过程中碰到了两个问题:
1、在用Path画圆角矩形的时候,我用了三种方式,而这三种方式只有path.addRoundRect()这个方法实现了最终的效果:
a. path.lineTo()配合path.arcTo()方法画的矩形,在用pathMeasure截取的时候,无法正常截取,获取的总长度length也是不正确的,在第二个圆角的时候就终止了;
b. path.lineTo()配合path.addArc()方法画的矩形,跟上一种方法是一样的结果,即同a;
c. path.addRoundRect()方法画的矩形,是没有问题的,实现了最终的效果。
请问一下path.arcTo()和path.addArc()为什么不行????有没有方法可以解决??

2、利用path.addRoundRect()方法画的矩形,它的起始点在左下角,有没有什么方法能更改这个起始点???

96

你有没有想过线段起点的位置是由什么决定的?

96

#10楼 @alittlecup
决定的?
我想到的是可以通过path.moveTo更改,也应该可以通过对canvas进行平移、旋转等操作,即对坐标的原点进行更改,也应该可以达到想要的效果吧

96

#11楼 @rango____ 不用的,确定你的目的是什么?最实际的是更改截取出来的线段的起点,而不是路径的起点

96

#12楼 @alittlecup
嗯嗯,懂了
还有一个问题,就那个arcTo为什么截取不成功??上面有具体描述

96

#13楼 @rango____ 这个就尴尬了,因为我不会

96

没事,感谢🙏

96
hattie · #16 ·

#5楼 @alittlecup ”不能写插值器就直接写四个animator“ 请问要怎么加到线上呢?

96

#16楼 @hattie
可以写插值器的, 可以参考下这个:https://github.com/struggle111/LineWhirl

96

#16楼 @hattie 把总路径分四段,一个animator一段不就可以了吗?具体的我也没有写,不过应该是可以实现的

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册