1 var width = 600; 2 var height = 400; 3 4 var svg = d3.select("#body") 5 .append("svg") 6 .attr("width",width) 7 .attr("height",height) 8 9 svg.append("rect") 10 .attr("fill","yellow") 11 .attr("x",100) 12 .attr("y",100) 13 .attr("width",100) 14 .attr("height",30) 15 .transition() 16 .attr("width",300)
1 var rect = svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 8 //打印rect 9 console.log(rect) //rect是选择集 10 11 //启动过渡效果 12 var recttran = rect.transition() 13 14 //打印recttran 15 console.log(recttran) //recttran是一个过渡对象
1 var rect = svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 var recttran = rect.transition() 8 .delay(500) //延迟500ms再开始 9 .duration(1000) //过渡时长为1000ms 10 .ease("blunce") //过渡样式 11 .attr("width",300) //目标属性
1 var rect = svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 8 9 var recttran = rect.transition() //开始一个过渡 10 .attr("width",300) //目标宽度为300 11 .transition() //开始一个过渡 12 .attr("height",300) //目标高度为300 13 .transition() //开始一个过渡 14 .attr("width",100) //目标宽度为100 15 .transition() //开始一个过渡 16 .attr("height",100) //目标高度为100
1 .attr("width",100) 2 .transition() 3 .attr("width",300)
1 var rect = svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 8 var recttran = rect.transition() 9 .duration(2000) 10 .attrtween("width",function(d,i,a){ 11 return function(t){ 12 return number(a) + t * 300 13 } 14 })
1 svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 .transition() 8 .duration(2000) 9 .attr("fill",'red')
1 svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 .transition() 8 .duration(2000) 9 .attr("width",300) 10 11 var text = svg.append("text") 12 .attr("fill","white") 13 .attr("x",150) 14 .attr("y",100) 15 .attr("dy","1.2em") 16 .attr("text-anchor","end") 17 .text(100) 18 19 20 var initx = text.attr("x") 21 var inittext = text.text() 22 23 var texttran = text.transition() 24 .duration(2000) 25 .tween("text",function(){ 26 return function(t){ 27 d3.select(this) 28 .attr("x",number(initx) + t * 250 ) 29 .text(math.floor(number(inittext) + t * 300 )) 30 } 31 })
1 //当t为0时,函数体力的操作是: 2 d3.select(this) 3 .attr("x",150 + 0 * 250) 4 .text(math.floor(100 + 0 * 300)) 5 6 //当t为1时,函数体里的操作是: 7 d3.select(this) 8 .attr("x",150 + 1 * 250 ) 9 .text(math.floor(100 + 1 * 300))
1 var rect = svg.append("rect") 2 .attr("fill","yellow") 3 .attr("x",100) 4 .attr("y",100) 5 .attr("width",100) 6 .attr("height",30) 7 8 rect.transition() 9 .attr("width",0) 10 .remove()
如对本文有疑问, 点击进行留言回复!!
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(一)
Cocos Creator 热更新工具BUG:重启游戏后热更新无效!(已解决)
网友评论