怎么让小猫咪svg的尾巴摆动

AbraRussell 2015-12-15 11:42:36

加精

如上图，是我用svg画出的两只猫咪，想让两只猫咪动起来，我提问的目的是怎么让第二只小猫咪的尾巴摆动起来，我想用js通过时间控制path的d属性的值来实现，但是想了下应该有更好的办法吧？

<!-- 这是尾巴的path -->

<path id="path" class="path" d="M80 200 C95 250, 100 120, 162 160" stroke="#FFA54F" stroke-width="5" fill="none"></path>

...全文

222659 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2015-12-17

打赏
举报

引用 17 楼 AbraRussell 的回复:

[quote=引用 16 楼 KK3K2005 的回复:] 吧尾巴所有动作的组合全部做出来然后依次循环一个个显示就是桢动画这个是运行性能最好的

那不是还要涉及到显示和隐藏，要实现来回摆动的话不是比较复杂，最重要的是这样性能反而会降低吧，这也是要由时间控制啊[/quote] 动画本来就要涉及时间过渡控制桢动画效率要高于过渡动画

KK3K2005 2015-12-17

打赏
举报

另外你试过了吗你凭什么说性能会降低

AbraRussell 2015-12-17

打赏
举报

引用 20 楼 KK3K2005 的回复:

另外你试过了吗你凭什么说性能会降低

你说的这个是css3动画还是什么？我知道的css3动画只能控制样式啊，如果是js控制的话频繁操作dom那肯定性能更低啊，我前面做出来的是只修改了一个path标签里的一个d属性，照大哥你说的如果显示加隐藏同时进行，虽然说dom重绘在这两者花费的时间差不多（照这么看性能好像差不多），但是多了很多代码啊。还是说大哥有什么高见我没领悟到？

qq_33396086 2015-12-16

打赏
举报

宇宙最强皮皮虾 2015-12-16

打赏
举报

nettman 2015-12-16

打赏
举报

AbraRussell 2015-12-16

打赏
举报

引用 9 楼 lzh3ng 的回复:

大神别只鼓掌啊，求救，下面是我的js代码


var x1, y1, x2, y2, x, y, mark_x;
    x1 = 95;
    y1 = 250;
    x2 = 100;
    y2 = 120;
    x = 162;
    y = 190;

    //通过时间控制路径改变
    var time_control = self.setInterval("control_tail()", 50);

    function revert_control() {
        /**
         * 从低到高
         */
        if (y > 190){
            y--;x2--;y2--;x1--;y1--;
        }else
            time_control = self.setInterval("control_tail()", 50);

        $("#path").attr("d", "M80 200 C" + x1 + " " + y1 + ", " + x2 + " " + y2 + ", " + x + " " + y);
    }
    function control_tail() {
        /**
         * 从高到低
         */
        if (y < 250){
            y++;x2++;y2++;x1++;y1++;
        }else
            time_control = self.setInterval("revert_control()", 50);

        $("#path").attr("d", "M80 200 C" + x1 + " " + y1 + ", " + x2 + " " + y2 + ", " + x + " " + y);
    }

lzh3ng 2015-12-16

打赏
举报

yy1233456789 2015-12-16

打赏
举报

qq_24399655 2015-12-16

打赏
举报

这个我已经了解很多了，我现在的问题是改变贝塞尔两个控制点和一个终点的问题，也就是<path d="M0 0 C x1 y1, x2, y2, 1 1"/>里面“C x1 y1, x2, y2, 1 1”三次贝塞尔改控制点的问题，我目前可以通过js使用 setInterval函数来改变path中d属性的值来实现尾巴来回摆动，但是页面性能不太好，具体见我的提问http://ask.csdn.net/questions/226603 所以大神有木有好的建议啊

AbraRussell 2015-12-16

打赏
举报

引用 16 楼 KK3K2005 的回复:

吧尾巴所有动作的组合全部做出来然后依次循环一个个显示就是桢动画这个是运行性能最好的

那不是还要涉及到显示和隐藏，要实现来回摆动的话不是比较复杂，最重要的是这样性能反而会降低吧，这也是要由时间控制啊

KK3K2005 2015-12-16

打赏
举报

吧尾巴所有动作的组合全部做出来然后依次循环一个个显示就是桢动画这个是运行性能最好的

不断学习的ITer 2015-12-16

打赏
举报

引用 4 楼 AbraRussell 的回复:

[quote=引用 3 楼 wyqlxy 的回复:] 可以的。你查找css3的曲线函数看看

animation-timing-function 你说的是这个？这个是规定动画速率曲线的啊，我看了所有css动画属性也没找到一个可以用来控制的啊

[/quote] CSS3里有贝塞尔曲线配合动画使用

AbraRussell 2015-12-15

打赏
举报

引用 6 楼 xmt1139057136 的回复:

http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3%E5%8A%A8%E7%94%BB-svg-canvas/?utm_source=tuicool&utm_medium=referral