html5 canvas树叶光标动画特效



75 298 100



特效描述:html5 canvas树叶 光标动画特效,html5 canvas虚幻的树叶光标动画。

代码结构

1. 引入JS

<script src="js/TweenMax.min.js"></script>

2. HTML代码

<canvas></canvas>
<script>
// Hold mouse down to enter tree-mode
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
// Variables
const mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}
// Event Listeners
addEventListener('mousedown', () => {
    tree.beginLoop = false
    TweenLite.to(tree.branch, 1, {
        x: 0,
        y: 0,
        ease: Power4.easeInOut
    })
})
addEventListener('mousemove', event => {
    mouse.x = event.clientX
    mouse.y = event.clientY
})
addEventListener('mouseup', () => {
    tree.beginLoop = true
})
addEventListener('resize', () => {
    canvas.width = innerWidth
    canvas.height = innerHeight
    init()
})
// Utility Functions
function drawBranch(l, branchAngle, branchWidth, x, y) {
    // Make longer branches wider
    c.fillRect(x, y, branchWidth, -l)
    c.save()
    c.translate(0, -l)
    if (l > 1) {
        // Start at -80 degrees
        let angle = -Math.PI * 4 / 9
        // Draw three branches
        for (let i = 0; i < 3; i++) {
            // The length of our new branches
            let length2 = l * 0.47
            // Make the middle branch bigger
            if (i == 1) length2 = length2 + 0.3 * l
            c.save()
            c.rotate(angle)
            drawBranch(length2, branchAngle, branchWidth, x, y)
            c.restore()
            // Add 90 degrees for the next branch
            angle = angle + branchAngle
        }
    }
    c.restore()
}
// Objects
function Tree(x, y, color) {
    this.x = x
    this.y = y
    this.color = color
    this.branch = {
        x: 200,
        y: 200,
        length: 30,
        width: 1,
        angle: Math.PI / 2
    }
    this.hasInitialized = false
    this.beginLoop = false
    this.lastMouse = {
        x: mouse.x,
        y: mouse.y
    }
    this.hue = 255
}
Tree.prototype.draw = function() {
    c.fillStyle = `hsl( ${this.hue}, 76%, 81%)`
    c.save()
    c.translate(this.x, this.y)
    drawBranch(
        this.branch.length,
        this.branch.angle,
        this.branch.width,
        this.branch.x,
        this.branch.y
    )
    c.restore()
}
Tree.prototype.update = function(ticker) {
    this.draw()
    if (this.beginLoop === true) {
        this.branch.x = this.branch.x + Math.cos(ticker)
        this.branch.y = this.branch.y + Math.sin(ticker)
    }
    this.hue = Math.abs(255 * Math.sin(ticker * 0.5))
    this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.01
    this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.01
    this.x = this.lastMouse.x
    this.y = this.lastMouse.y + 55
}
// Implementation
let tree
function init() {
    tree = new Tree(canvas.width / 2, canvas.height / 2 + 40, 'green')
}
// Animation Loop
let ticker = 0
function animate() {
    requestAnimationFrame(animate)
    c.fillStyle = 'black'
    c.fillRect(0, 0, canvas.width, canvas.height)
    tree.update(ticker)
    ticker += 0.01
    if (tree.hasInitialized === false) {
        tree.hasInitialized = true
        TweenLite.to(tree.branch, 1.5, {
            x: 0,
            y: 0,
            ease: Power4.easeInOut
        })
        setTimeout(() => {
            tree.beginLoop = true
        }, 1900)
    }
}
init()
animate()
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 滑动星星打分 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 其他 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到