SVG 立方体内嵌路径拼接
1.前言
我使用了jquery编写交互的旋转，由于初学因此不太承受，还请见谅。样式我是写stylus编码，自动生成css。css
2.正文
先放上一张效果图
html
我将其分红三部分。第一部分是正方体部分（SVG），第二部分是svg中的路径动画了（animateMotion + jQuery），第三部分则是交互旋转（jQuery）。jquery
1.正方体
作一个正方体git
个人思路是用六块svg正方形画板经过css属性旋转和平移来构成正方体。github
html代码：数组
<div class="page">
<div class="state">
<!-- 定位-->
<div class="container">
<!--旋转-->
<!-- 前 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="front">
<rect class="rect"></rect>
</svg>
<!-- 后 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="behind">
<rect class="rect "></rect>
</svg>
<!-- 左 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="left">
<rect class="rect "></rect>
</svg>
<!-- 右 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="right">
<rect class="rect "></rect>
</svg>
<!-- 上 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="top">
<rect class="rect "></rect>
</svg>
<!-- 下 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="bottom">
<rect class="rect "></rect>
</svg> </div>
</div>
</div>
stylus代码svg
html
margin 0
padding 0
height 100%
width 100%
body
height 100%
width 100%
.page
.state
height 300px
width 300px
position absolute
top 50%
left 50%
transform translate(-50%,-50%)//修正位置
.container
transform-style preserve-3d
position relative
height 300px
width 300px
transform rotateX(0deg) rotateY(0deg)
svg
position absolute
height 300px
width 300px
stroke-width 5px
stroke brown
fill transparent //填充用透明
.rect
height 300px
width 300px
.top
transform rotateX(90deg) translateZ(150px)
.bottom
transform rotateX(-90deg) translateZ(150px)
.left
transform rotateY(-90deg) translateZ(150px)
.right
transform rotateY(90deg) translateZ(150px)
.front
transform rotateY(0deg) translateZ(150px)
.behind
transform rotateY(180deg) translateZ(150px)
一般有两种方式来构建一个立方体
第一种：先平移再旋转。优势是不准太强的空间构造能力，写起来比较简单。缺点就是：代码数会多一些，须要在平移后设置旋转基点。替换一下样式就行。模块化
.top
fill blue
transform-origin: bottom
transform translateY(-200px) rotateX(90deg)
.bottom
fill red
transform-origin:top
transform translateY(200px) rotateX(-90deg)
.left
fill green
transform-origin: right
transform translateX(-200px) rotateY(-90deg)
.right
fill black
transform-origin: left
transform translateX(200px) rotateY(90deg)
.front
fill grey
transform translateZ()
.behind
fill pink
transform translateZ(-200px)
第二种：先旋转再平移。这个的特色就是与上面的相反了。（我使用的是这种）
两种生成立方体的原理看下图
第一种
第二种
以上就是两种构创建方体的方法大体原理了wordpress
2.路径动画
路径动画我是经过在相邻两个面上一个动画结束的位置和下一个动画起始位置重合，
下一个动画起始的延时设置为以前全部动画的动画时间，作到视觉认为路线是链接起来的。
先上代码：函数
<div class="state">
<!-- 定位-->
<div class="container">
<!--旋转-->
<!-- 前 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="front">
<rect class="rect"></rect>
<circle x="0" y="0" r="5" stroke="none" fill="red">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#frontY"></mpath>
</animateMOtion>
</circle>
<circle x="0" y="0" r="5" stroke="none" fill="blue">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#frontX"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m150.75,0.75l0,300" id="frontY" />
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m300,150c-300,0 -300,0 -300,0" id="frontX" />
</svg>
<!-- 后 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="behind">
<rect class="rect "></rect>
<circle x="0" y="0" r="5" stroke="none" fill="red">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#behindY"></mpath>
</animateMOtion>
</circle>
<circle x="0" y="0" r="5" stroke="none" fill="blue">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#behindX"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m150,300c0,0 1,-300 0,-300" id="behindY" />
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m300,150c-300,0 -300,0 -300,0" id="behindX" />
</svg>
<!-- 左 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="left">
<rect class="rect "></rect>
<circle x="0" y="0" r="5" stroke="none" fill="blue">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#leftX"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m300,150c-300,0 -300,0 -300,0" id="leftX" />
</svg>
<!-- 右 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="right">
<rect class="rect "></rect>
<circle x="0" y="0" r="5" stroke="none" fill="blue">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#rightX"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m300,150c-300,0 -300,0 -300,0" id="rightX" />
</svg>
<!-- 上 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="top">
<rect class="rect "></rect>
<circle x="0" y="0" r="5" stroke="none" fill="red">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#topY"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m150.75,0.75l0,300" id="topY" />
</svg>
<!-- 下 -->
<svg xmlns="http://www.w3/org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="bottom">
<rect class="rect "></rect>
<circle x="0" y="0" r="5" stroke="none" fill="red">
<animateMOtion dur="3s" begin="infinite">
<mpath xlink:href="#bottomY"></mpath>
</animateMOtion>
</circle>
<path fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" opacity="0.5"
d="m150.75,0.75l0,300" id="bottomY" />
</svg>
</div>
</div>
路径动画是有animateMotion元素作的因此能够不是直线，只是为了方便设计，我吧path路径设计成了直线
有兴趣的能够本身设计一下。
路径是我用 Method Draw 画的 editor.method.ac/
接下来就是重点的路径控制了
$(document).ready(function () {
const animate = document.getElementsByTagName('animateMotion');
// 0 frontY 1 frontX 2 behindY 3 behindX 4 leftX 5 rightX 6 topY 7 bottomY
var frontY = animate[0], frontX = animate[1],
behindY = animate[2], behindX = animate[3],
leftX = animate[4], rightX = animate[5],
topY = animate[6], bottomY = animate[7];
// Y面球体运动
(() => {
//先执行一次
frontY.beginElement();
setTimeout(() => {
bottomY.beginElement();
}, 3000);
setTimeout(() => {
behindY.beginElement();
}, 6000);
setTimeout(() => {
topY.beginElement();
}, 9000);
// 循环执行动画
var time = setInterval(() => {
frontY.beginElement();
setTimeout(() => {
bottomY.beginElement();
}, 3000);
setTimeout(() => {
behindY.beginElement();
}, 6000);
setTimeout(() => {
topY.beginElement();
}, 9000);
}, 12000);
})();
// X面球体运动
(() => {
//先执行一次
frontX.beginElement();
setTimeout(() => {
leftX.beginElement();
}, 3000);
setTimeout(() => {
behindX.beginElement();
}, 6000);
setTimeout(() => {
rightX.beginElement();
}, 9000);
// 循环执行动画
var time = setInterval(() => {
frontX.beginElement();
setTimeout(() => {
leftX.beginElement();
}, 3000);
setTimeout(() => {
behindX.beginElement();
}, 6000);
setTimeout(() => {
rightX.beginElement();
}, 9000);
}, 12000);
})();
})
我设置的是让animateMotion元素的起始值begin为infinite，在页面加载完毕后动画不会自动执行。
我用jQuery来控制动画的执行顺序。
首先获取每一个动画元素const animate = document.getElementsByTagName('animateMotion');，以后将每一个动画元素都标记好。
接着使用计时器setInterval和setTimeout计时器来控制动画。首先使用setInterval来控制动画循环执行。接着在setInterval中用setTimeout设置动画执行的顺序，每一个setTimeout计时器的延迟都为以前全部动画时间之和。模块化的最好先设置一个动画对象数组，而后将动画顺序加入数组。
最后附加两个API
// svg指当前svg DOM元素 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations()
两个API可已暂停当前动画，关于详情请看张鑫旭大佬的文章鑫空间
3.旋转控制
旋转控制是我还没完善的地方，用户体验不是十分好，还望大佬们帮我指出错误。另外一个旋转方案过一两天再添加上来。
代码：
var X = 0;//记录X轴旋转过的角度
var Y = 0;//记录Y轴旋转过的角度
// 旋转控制
$('.container').mousedown(function (event) {
var mousedownX = event.clientX;
var mousedownY = event.clientY;
$('body').mousemove(function (event) {
var mousemoveX = event.clientX;
var mousemoveY = event.clientY;
var scaleY = ((mousemoveX - mousedownX) / 200);
var scaleX = ((mousemoveY - mousedownY) / 200);
Y = ((Y + scaleY) % 360);
X = ((X + scaleX) % 360);
$('.container').animate({}, function () {
$('.container').css({ 'transform': `rotateX(${X}deg) rotateY(${Y}deg)` });
})
})
})
$('body').mouseup(function () {
$('body').unbind('mousemove');
$('body').unbind('mousedown');
})
首先设置两个变量X，Y这是记录这个立方体真正旋转了多少角度。
而后在立方体.container元素上添加鼠标点击事件mousedown事件，在回调函数中作处理内容。回调函数中先记录下来鼠标点击的位置。
接着在body上添加鼠标移动mousemove事件由于咱们移动不能只在立方体上，移动的范围要扩大到页面上。接着在移动事件中的回调函数作旋转处理，首先记录下来移动后鼠标的位置，计算出鼠标移动的距离而后除以一个数var scaleY = ((mousemoveX - mousedownX) / 200);注意其中的200没有真正表明的意义，只是由于鼠标移动的距离数值相对于旋转的角度来讲比较大，因此除以200减小它移动的角度，能够随意更改，其中鼠标在X轴上移动用户须要的是图形在以Y轴旋转。接着我么要计算立方体真正对于初始旋转了多少角度咱们最好作一下范围限制(取模运算)，Y = ((Y + scaleY) % 360);最后就是设置属性了，先用$('.container').animate()让旋转用动画的形式来作成，而后设置旋转角度$('.container').css({ 'transform': rotateX(${X}deg) rotateY(${Y}deg) });用css()方法来设置旋转角度。
3.总结
最后将github库放上来
github库
相关文章
- 1. SVG 立方体内嵌路径拼接
- 2. SVG 路径(path)
- 3. svg 路径path
- 4. SVG之旅：路径
- 5. vue之src图片路径地址动态拼接的方法。
- 6. Nginx转发路径拼接规则
- 7. Vue循环中拼接图片路径
- 8. python中拼接路径os.path.join的坑
- 9. python 路径拼接os.path.join()的使用
- 10. svg路径动画心得
- 更多相关文章...
- • Eclipse Java 构建路径 - Eclipse 教程
- • SVG
- SVG 教程 - • 适用于PHP初学者的学习线路和建议
- • 三篇文章了解 TiDB 技术内幕——说存储
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
欢迎关注本站公众号,获取更多信息
相关文章
- 1. SVG 立方体内嵌路径拼接
- 2. SVG 路径(path)
- 3. svg 路径path
- 4. SVG之旅：路径
- 5. vue之src图片路径地址动态拼接的方法。
- 6. Nginx转发路径拼接规则
- 7. Vue循环中拼接图片路径
- 8. python中拼接路径os.path.join的坑
- 9. python 路径拼接os.path.join()的使用
- 10. svg路径动画心得