[GIF] GIF Loop Coder - Introduction

最新推荐文章于 2025-08-22 19:33:51 发布

转载最新推荐文章于 2025-08-22 19:33:51 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5688841.html

文章标签：

#ui #javascript #ViewUI

介绍使用 GIFLoopCoder 制作循环动画 GIF 的方法，包括如何利用 JavaScript 和 HTML5 Canvas 添加对象到动画列表、设置动画属性及保存为动画 GIF。通过示例展示了创建动态元素及多星形图案的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Introducing the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

    list.addCircle({
        x:width/2,
        y:height/2,
        radius:150,
        fillStyle:"yellow",
        stroke: true,
        strokeStyle:"red",
        lineWidth: 20
    });
    
}

Make it move:

To do that you can pass array to the props:

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

    list.addCircle({
        x:width/2,
        y:height/2,
        radius:[100, 150],
        fillStyle: ["green", "yellow"],
        stroke: true,
        strokeStyle: ["yellow", "red"],
        lineWidth: [12, 20]
    });
    
}

Create Mutli stars:

function onGLC(glc) {
    glc.loop();
//     glc.size(400, 400);
//     glc.setDuration(5);
//     glc.setFPS(20);
//     glc.setMode('single');
//     glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

/*    list.addCircle({
        x:width/2,
        y:height/2,
        radius:[100, 150],
        fillStyle: ["green", "yellow"],
        stroke: true,
        strokeStyle: ["yellow", "red"],
        lineWidth: [12, 20]
    });*/
    
    for(var i = 0; i < 100; i++ ){
         list.addStar({
            x: Math.random() * width,
            y: Math.random() * height,
            outerRadius: 30 + Math.random() * 30,
            innerRadius: 10 + Math.random() * 20,
            fillStyle: color.randomRGB(),
            rotation: [0,120]
        })
    }
}