随笔- 567 文章- 0 评论- 0 阅读- 55万

使用Animate和CreateJS设计H5页面

Animate和CreateJS是常用于HTML5页面设计的工具，通过使用这些工具，可以创建各种动画特效，从而提高交互性和视觉效果。

游戏：Animate和CreateJS可以用于创建精彩的网页游戏，比如跑酷类、动作类、益智类等众多不同类型的游戏。这些游戏通常需要丰富的场景设计、角色设定、音效、背景音乐等元素，因此需要使用到更加复杂的交互逻辑。
3D模型展示：Animate和CreateJS还可用于创建3D模型的展示页面，如立体影像、3D建筑图、交互式产品展示等。在使用这种方式来呈现信息时，不仅需要针对页面进行npm安装相应的3D库包，同时还需要利用CreateJS的渲染引擎和相关API，实现逼真的视觉效果和细致深入的展示效果。
广告宣传：Animate和CreateJS也可以用于创建各种精美的广告宣传页面，例如品牌推广、商品促销、新品发布和客户分析报告等。使用这种方式设计的广告宣传页面更加生动、简洁、形象化，使得用户能够更好地了解和记得广告内容。
交互式教育：Animate和CreateJS还可以用于创建各种交互式的教育页面，比如培训课程、学术研究、科普解说等。通过设计交互性动画以及增强体验式展示，这些进步的教学工具有助于加速知识的传递，同时也能够更好地满足不同人群的学习需求。

总之，使用Animate和CreateJS可以为H5页面增加更多的视觉效果和交互功能，提高用户体验和互动性，同时也需要考虑技术实现难度和兼容性问题。因此，在设计复杂的案例时，需要谨慎选择技术，精细制作，并测试、验证其有效性，以确保达到预期效果并取得良好的结果。

以下是使用Animate和CreateJS创建的代码案例，可以通过这些示例了解具体的实现方法和应用技巧。需要注意的是，在使用这些代码时，应该根据实际需要进行适量的修改和定制，以达到最佳的用户体验效果。

游戏Demo

// 初始化舞台
var stage = new createjs.Stage("gameCanvas");

// 创建游戏精灵
var spriteSheet = new createjs.SpriteSheet({
    images: [img1, img2, img3], // 加载图片
    frames: {width:50, height:50}, // 精灵大小
    animations: {
        walk: [0, 5], 
        run: [6, 9], 
        jump: [10,13, "run"]
    }
});
var sprite = new createjs.Sprite(spriteSheet);

// 添加游戏精灵到舞台上
stage.addChild(sprite);
createjs.Ticker.framerate = 30;

// 更新游戏精灵状态
function tick(event) {
    if (sprite.currentAnimation != "run") {
        sprite.gotoAndPlay("run");
    }
    sprite.x += 10;
    stage.update(event);
}
createjs.Ticker.addEventListener("tick", tick);

雨天动画

// 初始化舞台
var stage = new createjs.Stage("canvas");

// 创建雨景效果对象
var rainShape = new createjs.Shape();
rainShape.graphics.bf(img).drawRect(0,0, canvas.width, canvas.height);

// 添加水滴到画布上
var dropsArr = [];
for (i=0; i<100; i++) {
    var drop = new createjs.Shape();
    drop.graphics.beginFill("white").drawCircle(0,0,3);
    drop.x = Math.random() * canvas.width;
    drop.y = Math.random() * canvas.height - canvas.height;
    dropsArr.push(drop);
    stage.addChild(drop);
}

// 动画更新
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
    for (i=0; i<dropsArr.length; i++) {
        dropsArr[i].y += 10;
        if (dropsArr[i].y > canvas.height) { dropsArr[i].y = -30 }
    }
    stage.update();
}

购物动画

// 初始化舞台
var stage, shoppingCartImage;
function init() {
    stage = new createjs.Stage("canvas");
    shoppingCartImage = new Image();
    shoppingCartImage.onload = handleImageLoad;
    shoppingCartImage.src = "shopping-cart.png";
}

// 图像加载完毕后，绘制购物车对象
function handleImageLoad(event) {
    var shoppingCartBitmap = new createjs.Bitmap(shoppingCartImage);
    stage.addChild(shoppingCartBitmap);

    // 监听鼠标移动事件
    createjs.Ticker.addEventListener("tick", handleMouseOver);
    function handleMouseOver(event) {
        var x = stage.mouseX;
        var y = stage.mouseY;
        if (x && y) {
            shoppingCartBitmap.x = x - 75;
            shoppingCartBitmap.y = y - 25;
            stage.update(event);
        }
    }
}

时钟效果

// 初始化舞台
var stage = new createjs.Stage("canvas");

// 创建表盘对象
var dial = new createjs.Shape();
dial.graphics.beginStroke("#FFF").drawCircle(75,75,70);
for (i=0; i<12; i++) {
    var angle = (i - 3) * (Math.PI * 2) / 12;
    var x2 = Math.cos(angle) * 60;
    var y2 = Math.sin(angle) * 60;
    var text = new createjs.Text(i+1, "20px Arial", "#FFF");
    text.textAlign = "center";
    text.textBaseline = "middle";
    text.x = x2 + 75;
    text.y = y2 + 75;
    dial.addChild(text);
}

// 添加指针对象
var armHour = new createjs.Shape();
armHour.graphics.setStrokeStyle(4).beginStroke("#FFF").moveTo(0,10).lineTo(0,-40);
armHour.x = 75;
armHour.y = 75;

var armMinute = new createjs.Shape();
armMinute.graphics.setStrokeStyle(3).beginStroke("#FFF").moveTo(0,10).lineTo(0,-60);
armMinute.x = 75;
armMinute.y = 75;

// 更新表针位置
function tick(event) {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    armHour.rotation = (hours % 12) * 30 + (minutes / 60) * 30;
    armMinute.rotation = minutes * 6;
    stage.update(event);
}
createjs.Ticker.addEventListener("tick", tick);

图片滑动展示

// 初始化舞台
var stage = new createjs.Stage("canvas");

// 加载图片资源
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadManifest([
    {id: "img1", src:"img1.jpg"},
    {id: "img2", src:"img2.jpg"},
    {id: "img3", src:"img3.jpg"}
]);

// 创建滑动展示对象
function handleComplete() {
    var img1 = queue.getResult("img1");
    var img2 = queue.getResult("img2");
    var img3 = queue.getResult("img3");

    var slideShow = new createjs.Container();

    var slide1 = new createjs.Bitmap(img1);
    slideShow.addChild(slide1);

    var slide2 = new createjs.Bitmap(img2);
    slide2.x = img1.width + 20;
    slideShow.addChild(slide2);

    var slide3 = new createjs.Bitmap(img3);
    slide3.x = slide2.x + img2.width + 20;
    slideShow.addChild(slide3);

    stage.addChild(slideShow);

    // 创建轮播动画
    createjs.Ticker.addEventListener("tick", handleTick);

    var screenWidth = document.body.clientWidth;
    var totalWidth = slideShow.getBounds().width;

    function handleTick(event) {
        var dx = -10;
        slideShow.x += dx;
        if (slideShow.x < screenWidth - totalWidth - 100) {
            slideShow.x = screenWidth;
        }
        stage.update(event);
    }
}

音频可视化效果

// 初始化舞台
var stage = new createjs.Stage("canvas");

// 创建音频对象
var audio = document.createElement("audio");
audio.src = "audio.mp3";
audio.controls = "true";
document.body.appendChild(audio);

// 解析音频数据
var analyzer = createjs.WebAudioPlugin.getAnalyser(audio);
analyzer.setFFTSize(2048); // 频率区间大小
var bufferLength = analyzer.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);

// 创建音频可视化效果
var barHeight, barWidth, barX;
var numBars = 200;

for (var i=0; i<numBars; i++) {
    barWidth = stage.canvas.width / numBars - 2;
    barX = i * (barWidth+2) + 1;
    var bar = new createjs.Shape();
    stage.addChild(bar);
}

// 更新音频数据并生成动画效果
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
    analyzer.getByteFrequencyData(dataArray);
    for (i=0; i<numBars;i++) {
barHeight = dataArray[i] / 2;
var bar = stage.getChildAt(i);
bar.graphics.clear().beginFill("white").drawRect(barX, stage.canvas.height-barHeight, barWidth, barHeight);
}
stage.update(event);
}