正弦曲线沿着正弦曲线

-1

我想复制使用jQuery的f.lux的视觉效果，看起来像this（抱歉质量差）。基本上，它是一个正弦波路径之后的一个圆。我看过jQuery.path动画，我尝试复制动画，但是由于使用CSS绘制正弦波，所以我的正弦波不连贯。有没有办法绘制正弦波，使其光滑，然后使正弦波路径之后的圆圈动起来？我无法获得小提琴的工作，但这是我的动画目前看起来像now。与f.lux动画不同，我的动画也不会循环回到开始位置。正弦曲线沿着正弦曲线

我不确定这个限制是什么，我是否需要制作f.lux的背景（正弦波的蓝色和粉红色一半），然后将动画放在它的顶部，或者我可以使整个视觉使用Javascript，CSS和jQuery？

有没有人有任何想法，或任何人都可以指向正确的方向吗？

来源

2016-11-27 D. Simon

为了让您更流畅线条，你可以使用SVG元素，像这样：

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M10 80 C 40 10, 65 20, 95 80" stroke="black" fill="#E0E0E0"/> 
    <path d="M95 80 C 105 100, 150 150, 180 80" stroke="black" fill="#EEEEEE"/> 
</svg>

这将使用两种不同的贝塞尔曲线，所以你可以使用不同的颜色作为背景。你将不得不改变一些值来匹配你想要的宽度/高度和曲率。这里有一个关于svg路径的解释：https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths。

如果您无法访问HTML源文件，则可以使用javascript或jQuery SVG创建插入svg元素。

来源

2016-11-27 18:26:01 Franck

正弦曲线沿着正弦曲线

回答

相关问题