找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发问答

关注:293

所属分类: 微信开发 微信小程序开发问答

1、清楚的描述问题,必要时请配图、代码等!点击查看如何发帖
2、本版为小程序技术问答板块,请勿各种无意义的灌水回复,违者将做禁封账号处理

3、请及时查看问题回复,为了让更多开发者得到参考,如问题得到解决,楼主务必选择一个最佳答案(点击“设为最佳”按钮),谢谢:)


QQ群:
很快小程序开发交流1群:立即加群
很快小程序开发交流2群:立即加群

有哪位大神可以帮忙把H5的动画特效转为微信小程序?

[复制链接]
查看: 872|回复: 2

TA的社区排名

积分:暂未上榜

发帖:暂未上榜

在线:NO. 4043 名

最佳答案
0 

3

主题

6

帖子

115

积分

新人求带

积分
115
 楼主| 发表于 2017-1-11 16:48:35 | 显示全部楼层 |阅读模式
10微币
本帖最后由 qq175074872 于 2017-1-11 18:20 编辑

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>snow</title>
    <style>
        body{ text-align: center;}
        canvas{background: #000;}
    </style>
</head>
<body>
<canvas width="800" height="600" id="c1"></canvas>

<script>
    function rnd(n, m){
        return Math.floor(Math.random()*(m-n) + n);
    };

    function d2a(n){
        return n*Math.PI/180;
    };

    //在画布中生成雪花:
    var oC = document.getElementById("c1");
    var gd = oC.getContext("2d");
    var maxW = 800;
    var maxH =600;
    var arr = [];
    var width = 20;

    for(var i=0; i<100; i++){
        arr.push({
            "left":rnd(0, 800),
            "top":rnd(0, 600),
            "deg":rnd(-10, 10),
            "scale":rnd(2, 10)
        });
    }

    setInterval(function(){
        gd.clearRect(0, 0, oC.width, oC.height);
        gd.save();

        for(var i=0; i<arr.length; i++){
            var h = 0.5 * arr.scale;
            arr.left = arr.left + Math.tan(d2a(arr.deg))*h;
            arr.top = arr.top + h;

            //若已在画面外则删除
            if(arr.left < -arr.scale || arr.left > maxW+arr.scale || arr.top > maxH+arr.scale){
                arr.splice(i--, 1);
                continue;
            }

            var width_i = arr.scale;
            var ra = gd.createRadialGradient(arr.left, arr.top, width_i/4, arr.left, arr.top, width_i);
            ra.addColorStop(0, "rgba(255,255,255,1)");
            ra.addColorStop(1, "rgba(255,255,255,0.1)");
            gd.fillStyle = ra;

            gd.beginPath();
            gd.arc(arr.left, arr.top, width_i, 0, 2*Math.PI);
            gd.fill();
        }

        gd.restore();
    }, 50);

    //不断增加新的雪花
    function next(){
        setTimeout(function(){
            if(arr.length < 200){
                for(var i=0; i<20; i++){
                    arr.push({
                        "left":rnd(0, 800),
                        "top":-20,
                        "deg":rnd(-10, 10),
                        "scale":rnd(2, 10)
                    });
                }
            }
            next();
        }, Math.random()*200+500);
    };

    next();
</script>
</body>
</html>

关注我的同学(只显示前32名)
回复

使用道具 举报

TA的社区排名

积分:暂未上榜

发帖:暂未上榜

在线:NO. 4043 名

最佳答案
0 

3

主题

6

帖子

115

积分

新人求带

积分
115
 楼主| 发表于 2017-1-11 18:17:53 | 显示全部楼层
//初始化雪花动画
  initSnow:function(){
    function rnd(n, m){
        return Math.floor(Math.random()*(m-n) + n);
    };
    function d2a(n){
        return n*Math.PI/180;
    };
    var _this = this;
    var  windowWidth=_this.data.windowWidth;
    var  windowHHeight=_this.data.windowHeight;
    //在画布中生成雪花:
    var ctx = wx.createCanvasContext("snow-canvas");
    var maxW = windowWidth;
    var maxH = windowHHeight;
    var arr = [];
    for(var i=0; i<10; i++){
        arr.push({
            "left":rnd(0, windowWidth),
            "top":rnd(0, windowHHeight),
            "deg":rnd(-10, 10),
            "scale":rnd(2, 10)
        });
    }
    //雪花飘动
    setInterval(function(){
        ctx.clearRect(0, 0, windowWidth, windowHHeight);
        ctx.save();
        for(var i=0; i<arr.length; i++){
            var h = 0.5 * arr[i].scale;
            arr[i].left = arr[i].left + Math.tan(d2a(arr[i].deg))*h;
            arr[i].top = arr[i].top + h;

            //若已在画面外则删除
            if(arr[i].left < -arr[i].scale || arr[i].left > maxW+arr[i].scale || arr[i].top > maxH+arr[i].scale){
                arr.splice(i--, 1);
                continue;
            }
            var width_i = arr[i].scale;
            var grd = ctx.createCircularGradient(arr[i].left, arr[i].top, width_i);
            grd.addColorStop(0, "rgba(255,255,255,1)");
            grd.addColorStop(1, "rgba(255,255,255,0.1)");
            ctx.beginPath()
            ctx.setFillStyle(grd);
            ctx.arc(arr[i].left, arr[i].top, width_i, 0, 2*Math.PI);
            ctx.fill();
        }
        ctx.restore();
        ctx.draw();
    }, 50);

    //不断增加新的雪花
    function next(){
        setTimeout(function(){
            if(arr.length < 50){
                for(var i=0; i<10; i++){
                    arr.push({
                        "left":rnd(0, windowWidth),
                        "top":-20,
                        "deg":rnd(-10, 10),
                        "scale":rnd(2, 10)
                    });
                }
            }
            next();
        }, Math.random()*200+500);
    };

    next();
  }
自己已搞定,大家可以参考参考
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

45

积分

新人求带

积分
45
发表于 2017-1-11 20:36:27 | 显示全部楼层
学习,感谢~~~
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com