createCircle(){
// 创建画布
let svg = d3.select(this.$refs.testR).append("svg") // 创建svg
.attr("width", 800).attr("height", 500); // 设置svg 宽高
svg.append("circle") // 创建中心园
.attr("fill","#215188") // 初始颜色
.attr("r",1) // 初始半径
.attr("cx",270) // x轴位置
.attr("cy",200) // y轴位置
.transition() // 开启动画过渡模式
.ease("bounce") // 过渡效果 bounce弹跳
.duration(1400) // 过渡时长
.attr("r",100) // 最终半径
.attr("fill","#6fdaff") // 最终填充颜色
// 延时加载波浪,等待圆环加载完
setTimeout(loadWave,1400);
function loadWave(){
/* 定义一个圆形裁剪路径,制作一个波浪路径,用圆环裁剪波浪 */
svg.append("defs").append("clipPath") // 定义一个裁剪路径
.attr("id","clipPath")
.append("circle")
.attr("r",100)
.attr("cx",100) // x轴位置
.attr("cy",0) // y轴位置;
/* 定义三个不同位置的波浪,通过切换波浪实现动画效果 */
// 初始位置
let d0 = "M-400,90"; // M:初始点位置x,y
d0+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0"; // 贝兹曲线
d0+= " V100 H0"; // A弧度: "x轴半径","y轴半径"
d0+= " Z"; // 终止
// 移动终点
let d1 = "M0,0"; // M:初始点位置x,y
d1+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0"; // 贝兹曲线
d1+= " V100 H0"; // A弧度: "x轴半径","y轴半径"
d1+= " Z"; // 终止
// 归零位置
let d2 = "M-400,0"; // M:初始点位置x,y
d2+= " q50,-40 100,0 t100,0 t100,0 t100,0 t100,0 t100,0"; // 贝兹曲线
d2+= " V100 H0"; // A弧度: "x轴半径","y轴半径"
d2+= " Z"; // 终止
let wave = svg.append("path") // 呈现波浪的元素
.attr("fill", "#ffffff80") // 填充渐变色,后两位为透明度
.attr("d", d0) // 绘制路径
.attr("transform", "translate(170,200)") // 图形整体移动与外圈对应
.attr("clip-path","url(#clipPath)"); // 应用裁剪
/* 定时切换不同的波浪 */
function waveTransition(isFirst){
if(!isFirst) wave.interrupt().attr("d", d2); // 归位
wave.transition().ease("out") // 动画效果 缓出
.duration(4000).attr("d", d1); // 动画时间与路径
setTimeout(waveTransition,4000); // 重启动画
};
waveTransition(true);
}
}
以上是主要代码段,基于d3实现。