html5 canvas时间沙漏动画特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 43 15



特效描述:时间沙漏动画。基于canvas绘制三角形沙漏翻转动画特效。

代码结构

1. 引入JS

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

2. HTML代码

<button onClick="app.flipCanvas()">翻转</button>
<script>
var app = app || {}
const boundaryStyle = {
  fillStyle: 'white',
  strokeStyle: 'transparent'
}
const colors = ['#D3F8E2', '#E4C1F9', '#F694C1', '#EDE7B1', '#A9DEF9']
app.init = function() {
  // module aliases
  const { Bodies, Body, Composite, Composites, Engine, Vector, World, Common } = Matter
  // create an engine
  const engine = Engine.create({
    render: {
      element: document.body,
      options: {
        height: window.innerHeight,
        width: window.innerWidth,
        background: '#2f2980',
        wireframes: false
      }
    }
  })
  const originY = window.innerHeight / 2
  const originX = window.innerWidth / 2
  const rectTopLeft = Bodies.rectangle( originX, originY, 20, 200, {
    angle: Math.PI / -6,
    render: boundaryStyle,
    isStatic: true
  })
  const rectTopRight = Bodies.rectangle( originX, originY, 20, 200, {
    angle: Math.PI / 6,
    render: boundaryStyle,
    isStatic: true
  })
  const rectTop = Bodies.rectangle( originX, originY, 280, 25, {
    render: boundaryStyle,
    isStatic: true
  })
  const rectBottom = Bodies.rectangle( originX, originY, 280, 25, {
    render: boundaryStyle,
    isStatic: true
  })
  const rectLeft = Bodies.rectangle( originX, originY, 16, 30, {
    render: boundaryStyle,
    isStatic: true
  })
  const rectRight = Bodies.rectangle( originX, originY, 16, 30, {
    render: boundaryStyle,
    isStatic: true
  })
  const rectBottomLeft = Bodies.rectangle( originX, originY, 20, 200, {
    angle: Math.PI / 6,
    render: boundaryStyle,
    isStatic: true
  })
  const rectBottomRight = Bodies.rectangle( originX, originY, 20, 200, {
    angle: Math.PI / -6,
    render: boundaryStyle,
    isStatic: true
  })
  Body.translate(rectTopLeft, Vector.create(-70, -55 * Math.sqrt(3)))
  Body.translate(rectTopRight, Vector.create(70, -55 * Math.sqrt(3)))
  Body.translate(rectTop, Vector.create(0, 100 * Math.sqrt(3) + 10))
  Body.translate(rectBottom, Vector.create(0, -100 * Math.sqrt(3) - 10))
  Body.translate(rectBottomLeft, Vector.create(-70, 55 * Math.sqrt(3)))
  Body.translate(rectBottomRight, Vector.create(70, 55 * Math.sqrt(3)))
  Body.translate(rectLeft, Vector.create(-20, 0))
  Body.translate(rectRight, Vector.create(20, 0))
  const hourglassCompound = Body.create({
    parts: [rectTop, rectTopLeft, rectTopRight, rectLeft, rectRight, rectBottomLeft, rectBottomRight, rectBottom],
    isStatic: true
  })
  const balls = Composites.pyramid(originX, originY, 20, 20, 0, 0, function(x, y){
    console.log(app.ballStyle)
    return Bodies.circle(x, y, 5, {
      render: {
        fillStyle: Common.choose(colors),
        strokeStyle: 'transparent'
      },
      friction: .09,
      restitution: .15,
      // isStatic: true
    })
  })
  Composite.rotate(balls, Math.PI, Vector.create(originX, originY))
  Composite.translate(balls, Vector.create(94, -40 * Math.sqrt(3)))
  // add all of the bodies to the world
  World.add(engine.world, [ hourglassCompound, balls ])
  // run the engine
  Engine.run(engine)
  app.flipCanvas = function(){
    const canvas = document.querySelector('canvas')
    canvas.classList.toggle('flip')
    engine.world.gravity.y *= -1
  }
}
app.init()</script>



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


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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