zim路径动画效果代码-html代码-BFW代码库

zim路径动画效果代码

代码语言：html

所属分类：动画

代码描述：zim路径动画效果代码

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  

</head>

<body translate="no" >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/createjs-1.3.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zim-cat.js"></script>

  
      <script>
const frame = new Frame({ scaling: "fit", width: 1024, height: 768, color: darker, outerColor: dark });
frame.on("ready", () => {// ES6 Arrow F    unction - similar to function(){}
  zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

  // often need below - so consider it part of the template
  const stage = frame.stage;
  const stageW = frame.width;
  const stageH = frame.height;

  // REFERENCES for ZIM at https://zimjs.com
  // see https://zimjs.com/intro.html for an intro example
  // see https://zimjs.com/learn.html for video and code tutorials
  // see https://zimjs.com/docs.html for documentation
  // see https://codepen.io/topic/zim/ for ZIM on CodePen

  // *** NOTE: ZIM Cat defaults to time in seconds
  // All previous versions, examples, videos, etc. have time in milliseconds
  // This can be set back with TIME = "milliseconds" but we suggest you give it a try!
  // There will be a warning in the conslole if your animation is not moving ;-)

  // CODE HERE

  const holder = new Container(stageW, stageH).addTo().noMouse();

  // started off with points:20 and interactive true 
  // then recorded change below in keydown
  const points = [[0, 0, 0, 0, -33.3, 0, 33.3, 0], [69, 66.7, 0, 0, -33.3, 0, 33.3, 0], [137.9, 0, 0, 0, -33.3, 0, 33.3, 0], [206.9, 66.7, 0, 0, -33.3, 0, 33.3, 0], [275.9, 0, 0, 0, -33.3, 0, 33.3, 0], [344.8, 66.7, 0, 0, -33.3, 0, 33.3, 0], [413.8, 0, 0, 0, -33.3, 0, 33.3, 0], [482.8, 66.7, 0, 0, -33.3, 0, 33.3, 0], [551.7, 0, 0, 0, -33.3, 0, 33.3, 0], [620.7, 66.7, 0, 0, -33.3, 0, 33.3, 0], [689.7, 0, 0, 0, -33.3, 0, 33.3, 0], [758.6, 66.7, 0, 0, -33.3, 0, 33.3, 0], [827.6, 0, 0, 0, -33.3, 0, 33.3, 0], [896.6, 66.7, 0, 0, -33.3, 0, 33.3, 0], [978, 121.2, 0, 0, -31.2, -6.5, 31.2, 6.5], [1057.1, 31.3, 0, 0, 4.2, 68.4, -4.2, -68.4], [974.4, 56.6, 0, 0, -16.6, -77.3, 16.6, 77.3], [1172.4, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1241.4, 0, 0, 0, -33.3, 0, 33.3, 0], [1310.3, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1379.3, 0, 0, 0, -33.3, 0, 33.3, 0], [1448.3, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1517.2, 0, 0, 0, -33.3, 0, 33.3, 0], [1586.2, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1655.2, 0, 0, 0, -33.3, 0, 33.3, 0], [1724.1, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1793.1, 0, 0, 0, -33.3, 0, 33.3, 0], [1862.1, 66.7, 0, 0, -33.3, 0, 33.3, 0], [1931, 0, 0, 0, -33.3, 0, 33.3, 0], [2000, 66.7, 0, 0, -33.3, 0, 33.3, 0]];
  const path = new Squiggle({
    interactive: false,
    points: points,
    thickness: 2,
    color: grey,
    length: 2000,
    dashed: [2, 2] }).
  sca(4, 3).center(holder);

  // // if doing this in CodePen 
  // // must set allowDefault:true in Frame parameters
  // frame.on("keydown.........完整代码请登录后点击上方下载按钮下载查看