TweenMax page-hopper

最新推荐文章于 2023-05-10 16:41:42 发布

LINBINGYING

最新推荐文章于 2023-05-10 16:41:42 发布

阅读量372

点赞数

文章标签：动画

这个好看动画归功于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]})

LINBINGYING

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TweenMax page-hopper

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

扫一扫