svg 怎么應用 CSS3 的過渡效果，實現(xiàn) path 路徑的平滑過渡
2 回答
心有法竹
TA貢獻1866條經(jīng)驗 獲得超5個贊
代碼如下（相關(guān)詳情在js代碼部分）：
css:
#svg , #path {
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
}
#path {
fill:#e7e7e7;
stroke:none;
}
html:
<svg width='100' height='100' xmlns='' version='1.1' id='svg'>
<path d='' id='toggle' id='path'></path>
</svg>
javascript:
var d1 = 'M 0 0 h 5 v 20 h -5 L 0 0 M 11 0 h 5 v 20 h -5 L 11 0 Z';
var d2 = 'M 0 0 L 18 11 L 0 22 L 0 0 Z';
var svg = $id('svg');
var path = $id('path');
實現(xiàn)點擊 svg 路徑發(fā)生變化。
汪汪一只貓
TA貢獻1898條經(jīng)驗 獲得超8個贊
在html5+css3中做到動態(tài)效果有4種方式：
1.transition(過渡)-通過屬性值的變化來平滑過渡產(chǎn)生動畫；
2.animate(動畫)-這是css3中的自帶的動畫，可以動過各種變形（比如形變、縮放、位移），這里的位移其實就可以實現(xiàn)弧線運動，但是這兒需要的代碼會非常多，個人是不建議用這個方法的。
3.canvas（畫布）-可以想象著拿著一支筆在畫筆上畫東西，映射到電腦上，就是在每個坐標上面畫東西。
4.svg-抱歉 這個我還沒研究。
推薦方式：
canvas，步驟：
1.要達到弧線運動，那么就必須知道弧線的公式
2.通過setinterval來設置每一幀的坐標，比如：
(function({
y=公式與x的聯(lián)系
} ,30)//這兒的30，代表30毫秒為一幀。
補充：如果要有個重復動作，那么久必須設置一個臨界值，然后點返回原點重復動作；
- 2 回答
- 0 關(guān)注
- 1560 瀏覽
添加回答
舉報
0/150
提交
取消