File indexing completed on 2025-01-19 04:00:00
0001 <!DOCTYPE html> 0002 <html> 0003 <head> 0004 <meta charset="utf-8" /> 0005 <style> 0006 html, body { width: 100%; height: 100%; margin: 0; } 0007 body { display: flex; } 0008 </style> 0009 <style> 0010 #bodymovin { width: 512px; height: 512px; margin: auto; 0011 background-color: white; 0012 background-size: 64px 64px; 0013 background-image: 0014 linear-gradient(to right, rgba(0, 0, 0, .3) 50%, transparent 50%), 0015 linear-gradient(to bottom, rgba(0, 0, 0, .3) 50%, transparent 50%), 0016 linear-gradient(to bottom, white 50%, transparent 50%), 0017 linear-gradient(to right, transparent 50%, rgba(0, 0, 0, .5) 50%); 0018 } 0019 </style> 0020 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.js"></script> 0021 </head><body> 0022 <div id="bodymovin"></div> 0023 0024 <script type="module"> 0025 import * as objects from './js/generated/all.js'; 0026 import { Vector } from './js/vector.js'; 0027 0028 var bm_anim = null; 0029 0030 function bm_reload(data) 0031 { 0032 if ( bm_anim ) 0033 bm_anim.destroy(); 0034 var animData = { 0035 container: document.getElementById('bodymovin'), 0036 renderer: 'svg', 0037 loop: true, 0038 autoplay: true, 0039 animationData: data, 0040 }; 0041 bm_anim = bodymovin.loadAnimation(animData); 0042 } 0043 0044 var an = new objects.Animation(); 0045 var layer = new objects.ShapeLayer(); 0046 an.layers.push(layer); 0047 an.in_point = layer.in_point = 0; 0048 an.out_point = layer.out_point = 60; 0049 0050 var circle = new objects.Ellipse() 0051 layer.shapes.push(circle); 0052 circle.size.value = new Vector(100, 100); 0053 circle.position.value = new Vector(220, 100); 0054 0055 var fill = new objects.Fill(); 0056 fill.color.value = new Vector(1, 1, 0); 0057 layer.shapes.push(fill); 0058 0059 // console.log(JSON.stringify(an.to_lottie())); 0060 bm_reload(an.to_lottie()); 0061 </script> 0062 0063 </body></html>