請問一下，為什么動態(tài)創(chuàng)建animate會失效，沒有動畫效果
原本打算用定時器setinterval循環(huán)調(diào)用的，但系發(fā)現(xiàn)創(chuàng)建出來的標簽沒有動畫效果，不知道是什么原因
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
? ? ? ?body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<svg width='100%' height='100%' id='box'>
<defs>
<linearGradient id="rainLinear" x1='0' y1='0' x2='0' y2='1'>
<stop offSet='0' stop-color='white'></stop>
<stop offSet='1' stop-color='blue'></stop>
</linearGradient>
</defs>
<path id='rainPath' d='M 10 10 10 500' stroke='red'></path>
<!-- <rect x='100' y='0' width='5' height='20' fill='url(#rainLinear)'>
? ? ? ? ? ?<animateMotion path='M 10 10 10 500' dur='5s'>
? ? ? ? ? ?</animateMotion>
? ? ? ?</rect> -->
</svg>
<script>
var SVG_NS = "http://www.w3.org/2000/svg"
var XLINK_NS = "http://www.w3.org/1999/xlink"
var box = document.querySelector('#box')
let idNum = 0
// 生成隨機數(shù)
function randomNum(min, max) {
return parseInt(min + (max - min) * Math.random())
}
// 雨滴函數(shù)
function createRain() {
// 創(chuàng)建雨滴和動畫
let rain = document.createElementNS(SVG_NS, 'rect')
// let rainAnimate = document.createElementNS(SVG_NS, 'animate')
let x = randomNum(1, 1000)
let time = randomNum(1, 3)
// 生成id
let id = idNum
idNum++
// 插入雨滴和動畫
box.appendChild(rain)
// rain.appendChild(rainAnimate)
// 設(shè)置雨滴屬性
rain.setAttribute('x', x)
rain.setAttribute('y', 0)
rain.setAttribute('width', 5)
rain.setAttribute('height', 20)
rain.setAttribute('fill', 'url(#rainLinear)')
rain.setAttribute('id', "a" + id)
// 插入動畫標簽
rain.innerHTML = `<animate attributeType="XML" attributeName="y" from="0" to="1000" dur="${time}s"></animate>`
// 時間到達后刪除生成的雨滴
let timer1 = setTimeout(() => {
box.removeChild(document.querySelector("#a" + id))
}, time * 1000 - 200);
}
// 定時器調(diào)用雨滴函數(shù)
let timer2 = setInterval(() => {
createRain()
}, 100)
//單獨調(diào)用雨滴函數(shù)
// createRain()
// var startTime = Date.now()
// var endTime=0
// setInterval(function () {
// ? ? ?endTime = Date.now()
// ? ? // console.log(startTime);
// ? ? // myTimeFn()
// }, 200)
// function myTimeFn(params) {
// ? ? // let endTime = Date.now()
// ? ? // console.log(1);
// ? ? // if ((endTime - startTime)>200 ) {
// ? ? // ? ? startTime = endTime
// ? ? // ? ? createRain()
// ? ? // ? ? console.log(2);
// ? ? // ? ? myTimeFn()
// ? ? // }else{
// ? ? // ? ? console.log(3);
// ? ? // ? ? myTimeFn()
// ? ? // ? ? return
// ? ? // }
// ? ? setTimeout(() => {
// ? ? ? ? createRain()
// ? ? ? ? myTimeFn()
// ? ? }, 200);
// }
// myTimeFn()
</script>
</body>
</html>
2021-10-15
兼容性的問題而以，沒事