search

zerosoul / rc-bullets

🌈基于CSS3 Animation，使用React构建的弹幕组件
https://zerosoul.github.io/rc-bullets/
587 stars 69 forks source link

duration 控制弹幕运动时长 #9

Open hugeorange opened 4 years ago

hugeorange commented 4 years ago

duration ，这个参数好像只能控制一条弹幕在屏幕中的出现时长，，，如果两条弹幕，一条字很多，一条字很少，两个弹幕的运动速度会不一样，会出现重叠，字数越多，运动速度越快，，，可不可以让每条弹幕的运动速度一样

zerosoul commented 4 years ago

duration ，这个参数好像只能控制一条弹幕在屏幕中的出现时长，，，如果两条弹幕，一条字很多，一条字很少，两个弹幕的运动速度会不一样，会出现重叠，字数越多，运动速度越快，，，可不可以让每条弹幕的运动速度一样

感谢反馈 我可以试试优化 不过在我动手前 你也可以试试 😄

hugeorange commented 4 years ago

duration ，这个参数好像只能控制一条弹幕在屏幕中的出现时长，，，如果两条弹幕，一条字很多，一条字很少，两个弹幕的运动速度会不一样，会出现重叠，字数越多，运动速度越快，，，可不可以让每条弹幕的运动速度一样

感谢反馈 我可以试试优化 不过在我动手前 你也可以试试 😄

@zerosoul 您好，我目前是这样处理的：由于您的动画是靠 animation 的 duration 属性控制的，感觉从正向途径是没法改变的，我想了一个歪招，就是给每条弹幕设置一个 min-width 样式，这样能在一定程度避免速度不一致，但如果字数过多的情况下还是避免不了，，，不过这样搞一下，，效果感觉好多了😀😀😀

zerosoul commented 4 years ago

duration ，这个参数好像只能控制一条弹幕在屏幕中的出现时长，，，如果两条弹幕，一条字很多，一条字很少，两个弹幕的运动速度会不一样，会出现重叠，字数越多，运动速度越快，，，可不可以让每条弹幕的运动速度一样

感谢反馈 我可以试试优化 不过在我动手前 你也可以试试 😄

@zerosoul 您好，我目前是这样处理的：由于您的动画是靠 animation 的 duration 属性控制的，感觉从正向途径是没法改变的，我想了一个歪招，就是给每条弹幕设置一个 min-width 样式，这样能在一定程度避免速度不一致，但如果字数过多的情况下还是避免不了，，，不过这样搞一下，，效果感觉好多了😀😀😀

可以的，很机智。彻底解决这个问题，或许可以加一个speed参数，我看了下主流弹幕方式，也是走duration，也就是有快有慢，所以这不是个bug😄