您的位置：首页 > 运维架构

TweenMax page-hopper

2016-03-21 21:52 465 查看

这个好看动画归功于TweenMax，line的x1跟x2一样，stroke-linecap="round"，就出现圆点，然后动态改变x1和x2来实现移动 var tl = new TimelineMax();
tl.to('#joinLine', 0.3, {
attr:{
x1:target.getAttribute('cx')
},
strokeWidth:0,

}).to('#joinLine', 1, {
attr:{
x2:target.getAttribute('cx')
},
ease:Elastic.easeOut.config(1, 0.76)
}, '+=0')
.to('#joinLine', 2, {
strokeWidth:size,
ease:Elastic.easeOut.config(1, 0.8)
}, '-=1')

tl.timeScale(2)html代码
<body>
<div class="container">
<svg width="900px" height="900px" viewBox="0 0 800 600">
<defs>
<mask id="radioMask"></mask>
</defs>
<g id="mainGroup">
<g id="circleGroup" fill="transparent" stroke-width="4" stroke-miterlimit="10" stroke="#fff">
<circle cx="260" cy="300" r="23" />
<circle cx="330" cy="300" r="23" />
<circle cx="400" cy="300" r="23" />
<circle cx="470" cy="300" r="23" />
<circle cx="540" cy="300" r="23" />
</g>
<line id="joinLine" fill="none" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="260" y1="300" x2="260" y2="300"/>
</g>
</svg>

</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src="index.js"></script>

</body>css代码
body {
background-color:#488BDA;
overflow: hidden;
}

body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
max-width:100%;

}

svg{
max-width:100%;
visibility:hidden;

}

#circleGroup, #joinLine{
stroke:#fff;
}
circle{
cursor:pointer;
}js代码
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
size = 20

//center the container cos it's pretty an' that

TweenMax.set(container, {
position: 'absolute',
top: '50%',
left: '50%',
xPercent: -50,
yPercent: -50
})
TweenMax.set('svg', {
visibility: 'visible'
})

select('#joinLine').setAttribute('stroke-width', size);
var maskSource = select('#circleGroup').cloneNode(true);
maskSource.id = '';
maskSource.setAttribute('fill', '#FFF');
maskSource.setAttribute('stroke', '#777777');
maskSource.setAttribute('stroke-width', 5);
select('#radioMask').appendChild(maskSource);
select('#mainGroup').setAttribute('mask', 'url(#radioMask)')
document.body.onclick = function(e){

var target = e.target;
if(target.tagName == 'circle'){

var id = target.id;

var tl = new TimelineMax();
tl.to('#joinLine', 0.3, {
attr:{
x1:target.getAttribute('cx')
},
strokeWidth:0,

}).to('#joinLine', 1, {
attr:{
x2:target.getAttribute('cx')
},
ease:Elastic.easeOut.config(1, 0.76)
}, '+=0')
.to('#joinLine', 2, {
strokeWidth:size,
ease:Elastic.easeOut.config(1, 0.8)
}, '-=1')

tl.timeScale(2)
}
}

//automate the first one
document.body.onclick({target:selectAll('circle')[2]})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 动画

相关文章推荐

新的分享

章节导航