肆拾肆- 微信小程序 canvas 解锁及弹簧物理效应动画

最新推荐文章于 2023-04-17 20:23:52 发布
最新推荐文章于 2023-04-17 20:23:52 发布
阅读量662 收藏 1
点赞数
分类专栏： 三世书记录 文章标签： canvas javascript 小程序 js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BerryBC/article/details/106912982
版权

1. 效果

简单动画

在微信小程序内做基于弹簧物理效应的动画。

2. 关于响应事件设置

微信现在好像只提供 H5 的 Canvas 接口，然后关于拖动、点击的事件接口如下：

Page({
  onLoad: function () {
	// ......
  },
  
  // 这里是拖动响应
  onTouchMove: function (e) {
    cleanLine(false);
    gbobjPoint.isTouch = true;
    let tmPoint = e.touches[0];
    if (tmPoint.x < 0) {
      gbobjPoint.touchX = 0;
    } else if (tmPoint.x > gbobjPoint.canW) {
      gbobjPoint.touchX = gbobjPoint.canW;
    } else {
      gbobjPoint.touchX = tmPoint.x;
    };
    if (tmPoint.y < 0) {
      gbobjPoint.touchY = 0;
    } else if (tmPoint.y > gbobjPoint.canH) {
      gbobjPoint.touchY = gbobjPoint.canH;
    } else {
      gbobjPoint.touchY = tmPoint.y;
    };
    for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {
      if (!gbobjPoint.arrPoint[intI].clicked) {
        let dblFarFTouchX = tmPoint.x - gbobjPoint.arrPoint[intI].nowx;
        let dblFarFTouchY = tmPoint.y - gbobjPoint.arrPoint[intI].nowy;
        if ((dblFarFTouchX * dblFarFTouchX + dblFarFTouchY * dblFarFTouchY) < (gbobjPoint.R * gbobjPoint.R)) {
          gbobjPoint.arrPoint[intI].clicked = true;
          gbobjPoint.lineP[gbobjPoint.numOfP] = intI;
          gbobjPoint.numOfP++;
          if (gbobjPoint.numOfP == gbobjPoint.pwNum) {
            let bolRight = true;
            for (let intI = 0; intI < gbobjPoint.pwNum; intI++) {
              if (gbobjPoint.lineP[intI] != gbobjPoint.pw[intI]) {
                bolRight = false;
              };
            };
            if (bolRight) {
              gbobjPoint.fading = true;
            };
          };
        };
      };
    };
  },

  // 这里是手指离开的响应事件
  onTouchEnd: function (e) {
    gbobjPoint.isTouch = false;

    if (gbobjPoint.lineInv) {
      cleanLine(true);
    };
    gbobjPoint.lineInv = setInterval(invLine, 50);
  },
);

3. 关于力效应

1 ) 弹簧效应主要公式为：
F ( x ) = − m x F(x) = -mx F(x)=−mx

所以其实纯粹是物体越远，受的力越大。

2 ) 当点击时，相当于也给一个力作用于所有点：
这里我给予两个力

  • 当位于圆圈两倍半径内，给与弹簧力
  • 当位于圆圈两倍半径外，给与小一点的弹簧力
    if (gbobjPoint.isTouch) {
      if (dblFarT < (gbobjPoint.R * 2) * (gbobjPoint.R * 2)) {
        gbobjPoint.arrPoint[intI].vx += dblGapTX / 18;
        gbobjPoint.arrPoint[intI].vy += dblGapTY / 18;
      } else {
        if (dblGapTX > 0) {
          gbobjPoint.arrPoint[intI].vx += Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vx += -Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        };
        if (dblGapTY > 0) {
          gbobjPoint.arrPoint[intI].vy += Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vy += -Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        };
      };
    };

3 ) 为了体现阻尼效果我还给了一个阻尼力

F ( v ) = − m v F(v) = -mv F(v)=−mv

4. 关于力的体现

纯粹是用一个定时器对所有点的状态以及位置计算出各点现在的位置以及力的方向，代码如下：

function funRoundInv() {
  gbobjPoint.ctx.fillStyle = gbobjPoint.backColor + "1)";
  gbobjPoint.ctx.fillRect(0, 0, gbobjPoint.canW, gbobjPoint.canH);
  if (gbobjPoint.numOfP > 0) {
    gbobjPoint.ctx.lineWidth = gbobjPoint.R / 8;
    gbobjPoint.ctx.strokeStyle = gbobjPoint.lineColor + (gbobjPoint.lineTime / 10).toString() + ")";
    gbobjPoint.ctx.beginPath();
    gbobjPoint.ctx.moveTo(gbobjPoint.arrPoint[gbobjPoint.lineP[0]].nowx, gbobjPoint.arrPoint[gbobjPoint.lineP[0]].nowy);

    if (gbobjPoint.numOfP > 1) {
      for (let intI = 1; intI < gbobjPoint.numOfP; intI++) {
        gbobjPoint.ctx.lineTo(gbobjPoint.arrPoint[gbobjPoint.lineP[intI]].nowx, gbobjPoint.arrPoint[gbobjPoint.lineP[intI]].nowy);
      };
    };
    if (gbobjPoint.isTouch) {
      gbobjPoint.ctx.lineTo(gbobjPoint.touchX, gbobjPoint.touchY);
    };
    gbobjPoint.ctx.stroke();
  };
  gbobjPoint.ctx.lineWidth = 0;
  for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {
    gbobjPoint.ctx.fillStyle = gbobjPoint.arrPoint[intI].color;

    let dblGapX = (gbobjPoint.arrPoint[intI].nowx - gbobjPoint.arrPoint[intI].orgx);
    let dblGapY = (gbobjPoint.arrPoint[intI].nowy - gbobjPoint.arrPoint[intI].orgy);


    let dblGapTX = gbobjPoint.touchX - gbobjPoint.arrPoint[intI].nowx;
    let dblGapTY = gbobjPoint.touchY - gbobjPoint.arrPoint[intI].nowy;
    let dblFarT = (dblGapTX) * (dblGapTX) + (dblGapTY) * (dblGapTY);

    if (gbobjPoint.isTouch) {
      if (dblFarT < (gbobjPoint.R * 2) * (gbobjPoint.R * 2)) {
        gbobjPoint.arrPoint[intI].vx += dblGapTX / 18;
        gbobjPoint.arrPoint[intI].vy += dblGapTY / 18;
      } else {
        if (dblGapTX > 0) {
          gbobjPoint.arrPoint[intI].vx += Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vx += -Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        };
        if (dblGapTY > 0) {
          gbobjPoint.arrPoint[intI].vy += Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vy += -Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        };
      };
    };
    gbobjPoint.arrPoint[intI].vx += -dblGapX / 5;
    gbobjPoint.arrPoint[intI].vy += -dblGapY / 5;

    gbobjPoint.arrPoint[intI].vx += -gbobjPoint.arrPoint[intI].vx / 16;
    gbobjPoint.arrPoint[intI].vy += -gbobjPoint.arrPoint[intI].vy / 16;

    gbobjPoint.arrPoint[intI].nowx += gbobjPoint.arrPoint[intI].vx;
    gbobjPoint.arrPoint[intI].nowy += gbobjPoint.arrPoint[intI].vy;
    gbobjPoint.ctx.beginPath();
    gbobjPoint.ctx.arc(gbobjPoint.arrPoint[intI].nowx, gbobjPoint.arrPoint[intI].nowy, gbobjPoint.R, 0, 2 * Math.PI);
    gbobjPoint.ctx.closePath();
    gbobjPoint.ctx.fill();
  };
  if (gbobjPoint.fading) {
    gbobjPoint.ctx.fillStyle = gbobjPoint.backColor + (gbobjPoint.fadeTime / 10).toString() + ")";
    gbobjPoint.ctx.fillRect(0, 0, gbobjPoint.canW, gbobjPoint.canH);
    if (gbobjPoint.fadeIn) {
      gbobjPoint.fadeTime -= 0.3;
      if (gbobjPoint.fadeTime < 0) {
        gbobjPoint.fading = false;
        gbobjPoint.fadeIn = false;
      };
    } else {
      gbobjPoint.fadeTime += 0.3;
      if (gbobjPoint.fadeTime >= 10.5) {
        gbobjPoint.fading = false;
        clearInterval(gbobjPoint.roundInv);
        gbobjPoint.roundInv=null;
        gbobjPoint.wordInv=setInterval( funWordInv,30);
      };
    };
  };
};

5. 全代码

const app = getApp();
let arrColor = ["#FF9D9D", "#E9FD78", "#6BFFAD", "#6BB0FF", "#E16BFF", "#FF6B7F", "#31ECDD", "#9BEC31", "#ECBA31"];
let gbobjPoint = {};
gbobjPoint.intPoint = 9;
gbobjPoint.arrPoint = [];
gbobjPoint.R = 9;
gbobjPoint.ctx = 0;
gbobjPoint.canW = 0;
gbobjPoint.canH = 0;
gbobjPoint.backColor = "rgba(255, 240, 255,";
gbobjPoint.roundInv = 0;
gbobjPoint.isTouch = false;
gbobjPoint.touchX = 0;
gbobjPoint.touchY = 0;
gbobjPoint.dpr = 0;
gbobjPoint.lineP = [];
gbobjPoint.numOfP = 0;
gbobjPoint.lineColor = "rgba(200,160,200,";
gbobjPoint.lineInv = null;
gbobjPoint.lineTime = 10;
gbobjPoint.fadeIn = true;
gbobjPoint.fadeTime = 10;
gbobjPoint.fading = true;
gbobjPoint.pw = [1, 3, 6, 4, 8, 5, 1, 1, 1];
gbobjPoint.pwNum = 6;
gbobjPoint.wordInv = null;
gbobjPoint.wordNum = 3;
gbobjPoint.wordContent = ["我","爱","丹尼尔"];
gbobjPoint.wordNow = 0;
gbobjPoint.wordMaxTime =10;
gbobjPoint.wordTime =0;
gbobjPoint.wordColor ="rgba(128, 0, 128,"

class claPoint {
  constructor() {
    this.color = "";
    this.orgx = 0;
    this.orgy = 0;
    this.nowx = 0;
    this.nowy = 0;
    this.vx = Math.random() * 5 - 2.5;
    this.vy = Math.random() * 5 - 2.5;
    this.clicked = false;
  };
};

function cleanLine(bolReal) {
  if (bolReal) {
    for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {
      gbobjPoint.arrPoint[intI].clicked = false;
      gbobjPoint.lineP[intI] = -1;
    };
    gbobjPoint.numOfP = 0;
  };
  gbobjPoint.lineTime = 10;
  clearInterval(gbobjPoint.lineInv);
  gbobjPoint.lineInv = null;
};

function invLine() {
  gbobjPoint.lineTime--;
  if (gbobjPoint.lineTime == 0) {
    cleanLine(true);
  };
};
function funWordInv(){
  
  gbobjPoint.ctx.fillStyle = gbobjPoint.backColor + "1)";
  gbobjPoint.ctx.fillRect(0, 0, gbobjPoint.canW, gbobjPoint.canH);
  gbobjPoint.ctx.fillStyle = gbobjPoint.wordColor+(1-gbobjPoint.wordTime/gbobjPoint.wordMaxTime).toString()+")";
  gbobjPoint.ctx.font = (gbobjPoint.wordTime/gbobjPoint.wordMaxTime*150).toString()+"px '微软雅黑'";
  gbobjPoint.ctx.textAlign = "center"; 
  gbobjPoint.ctx.textBaseline = "middle";

  gbobjPoint.ctx.fillText(gbobjPoint.wordContent[gbobjPoint.wordNow], gbobjPoint.canW/2, gbobjPoint.canH/2);
  gbobjPoint.wordTime+=0.1;
  if(gbobjPoint.wordTime>gbobjPoint.wordMaxTime){
    gbobjPoint.wordTime=0;
    gbobjPoint.wordNow++;
    if(gbobjPoint.wordNow>=gbobjPoint.wordNum){
      clearInterval(gbobjPoint.wordInv);
      gbobjPoint.wordInv=null;
    };
  };
};

function funRoundInv() {
  gbobjPoint.ctx.fillStyle = gbobjPoint.backColor + "1)";
  gbobjPoint.ctx.fillRect(0, 0, gbobjPoint.canW, gbobjPoint.canH);
  if (gbobjPoint.numOfP > 0) {
    gbobjPoint.ctx.lineWidth = gbobjPoint.R / 8;
    gbobjPoint.ctx.strokeStyle = gbobjPoint.lineColor + (gbobjPoint.lineTime / 10).toString() + ")";
    gbobjPoint.ctx.beginPath();
    gbobjPoint.ctx.moveTo(gbobjPoint.arrPoint[gbobjPoint.lineP[0]].nowx, gbobjPoint.arrPoint[gbobjPoint.lineP[0]].nowy);

    if (gbobjPoint.numOfP > 1) {
      for (let intI = 1; intI < gbobjPoint.numOfP; intI++) {
        gbobjPoint.ctx.lineTo(gbobjPoint.arrPoint[gbobjPoint.lineP[intI]].nowx, gbobjPoint.arrPoint[gbobjPoint.lineP[intI]].nowy);
      };
    };
    if (gbobjPoint.isTouch) {
      gbobjPoint.ctx.lineTo(gbobjPoint.touchX, gbobjPoint.touchY);
    };
    // gbobjPoint.ctx.closePath();
    // gbobjPoint.ctx.closePath();   
    gbobjPoint.ctx.stroke();
  };
  gbobjPoint.ctx.lineWidth = 0;
  for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {
    gbobjPoint.ctx.fillStyle = gbobjPoint.arrPoint[intI].color;

    let dblGapX = (gbobjPoint.arrPoint[intI].nowx - gbobjPoint.arrPoint[intI].orgx);
    let dblGapY = (gbobjPoint.arrPoint[intI].nowy - gbobjPoint.arrPoint[intI].orgy);


    let dblGapTX = gbobjPoint.touchX - gbobjPoint.arrPoint[intI].nowx;
    let dblGapTY = gbobjPoint.touchY - gbobjPoint.arrPoint[intI].nowy;
    let dblFarT = (dblGapTX) * (dblGapTX) + (dblGapTY) * (dblGapTY);

    if (gbobjPoint.isTouch) {
      if (dblFarT < (gbobjPoint.R * 2) * (gbobjPoint.R * 2)) {
        gbobjPoint.arrPoint[intI].vx += dblGapTX / 18;
        gbobjPoint.arrPoint[intI].vy += dblGapTY / 18;
      } else {
        if (dblGapTX > 0) {
          // gbobjPoint.arrPoint[intI].vx += (gbobjPoint.R * 2) / 13 + (dblGapTX-gbobjPoint.R* 2) / 39;
          // gbobjPoint.arrPoint[intI].vx += Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 50;
          gbobjPoint.arrPoint[intI].vx += Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vx += -Math.sqrt(dblFarT - (dblGapTY) * (dblGapTY)) / 85;
        };
        if (dblGapTY > 0) {
          gbobjPoint.arrPoint[intI].vy += Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        } else {
          gbobjPoint.arrPoint[intI].vy += -Math.sqrt(dblFarT - (dblGapTX) * (dblGapTX)) / 85;
        };
      };
    };
    gbobjPoint.arrPoint[intI].vx += -dblGapX / 5;
    gbobjPoint.arrPoint[intI].vy += -dblGapY / 5;


    // gbobjPoint.arrPoint[intI].vx += Math.random() ;
    // gbobjPoint.arrPoint[intI].vy += Math.random();

    gbobjPoint.arrPoint[intI].vx += -gbobjPoint.arrPoint[intI].vx / 16;
    gbobjPoint.arrPoint[intI].vy += -gbobjPoint.arrPoint[intI].vy / 16;

    // if (dblGapX>0){
    //   gbobjPoint.arrPoint[intI].vx+=1/(Math.pow( dblGapX+6,2))/3;
    // }else{
    //   gbobjPoint.arrPoint[intI].vx+=-1/(Math.pow( -dblGapX-6,2))/3;
    // };    
    // if (dblGapY>0){
    //   gbobjPoint.arrPoint[intI].vy+=1/(Math.pow( dblGapY+6,2))/3;
    // }else{
    //   gbobjPoint.arrPoint[intI].vy+=-1/(Math.pow( -dblGapY-6,2))/3;
    // };

    gbobjPoint.arrPoint[intI].nowx += gbobjPoint.arrPoint[intI].vx;
    gbobjPoint.arrPoint[intI].nowy += gbobjPoint.arrPoint[intI].vy;
    gbobjPoint.ctx.beginPath();
    gbobjPoint.ctx.arc(gbobjPoint.arrPoint[intI].nowx, gbobjPoint.arrPoint[intI].nowy, gbobjPoint.R, 0, 2 * Math.PI);
    gbobjPoint.ctx.closePath();
    gbobjPoint.ctx.fill();
  };
  if (gbobjPoint.fading) {
    gbobjPoint.ctx.fillStyle = gbobjPoint.backColor + (gbobjPoint.fadeTime / 10).toString() + ")";
    gbobjPoint.ctx.fillRect(0, 0, gbobjPoint.canW, gbobjPoint.canH);
    if (gbobjPoint.fadeIn) {
      gbobjPoint.fadeTime -= 0.3;
      if (gbobjPoint.fadeTime < 0) {
        gbobjPoint.fading = false;
        gbobjPoint.fadeIn = false;
      };
    } else {
      gbobjPoint.fadeTime += 0.3;
      if (gbobjPoint.fadeTime >= 10.5) {
        gbobjPoint.fading = false;
        clearInterval(gbobjPoint.roundInv);
        gbobjPoint.roundInv=null;
        gbobjPoint.wordInv=setInterval( funWordInv,30);
      };
    };
  };
};

Page({
  onPullDownRefresh() {
    wx.stopPullDownRefresh()
  },
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

  onLoad: function () {

  },
  onTouchMove: function (e) {
    cleanLine(false);
    gbobjPoint.isTouch = true;
    let tmPoint = e.touches[0];
    if (tmPoint.x < 0) {
      gbobjPoint.touchX = 0;
    } else if (tmPoint.x > gbobjPoint.canW) {
      gbobjPoint.touchX = gbobjPoint.canW;
    } else {
      gbobjPoint.touchX = tmPoint.x;
    };
    if (tmPoint.y < 0) {
      gbobjPoint.touchY = 0;
    } else if (tmPoint.y > gbobjPoint.canH) {
      gbobjPoint.touchY = gbobjPoint.canH;
    } else {
      gbobjPoint.touchY = tmPoint.y;
    };
    for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {
      if (!gbobjPoint.arrPoint[intI].clicked) {
        let dblFarFTouchX = tmPoint.x - gbobjPoint.arrPoint[intI].nowx;
        let dblFarFTouchY = tmPoint.y - gbobjPoint.arrPoint[intI].nowy;
        if ((dblFarFTouchX * dblFarFTouchX + dblFarFTouchY * dblFarFTouchY) < (gbobjPoint.R * gbobjPoint.R)) {
          gbobjPoint.arrPoint[intI].clicked = true;
          gbobjPoint.lineP[gbobjPoint.numOfP] = intI;
          gbobjPoint.numOfP++;
          if (gbobjPoint.numOfP == gbobjPoint.pwNum) {
            let bolRight = true;
            for (let intI = 0; intI < gbobjPoint.pwNum; intI++) {
              if (gbobjPoint.lineP[intI] != gbobjPoint.pw[intI]) {
                bolRight = false;
              };
            };
            if (bolRight) {
              gbobjPoint.fading = true;
            };
          };
        };
      };
    };
  },
  onTouchEnd: function (e) {
    gbobjPoint.isTouch = false;

    if (gbobjPoint.lineInv) {
      cleanLine(true);
    };
    gbobjPoint.lineInv = setInterval(invLine, 50);
  },
  onReady: function () {
    const query = wx.createSelectorQuery()
    query.select('#canDrawPoint')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');

        gbobjPoint.ctx = ctx;
        gbobjPoint.dpr = wx.getSystemInfoSync().pixelRatio;
        const dpr =gbobjPoint.dpr;
        canvas.width = res[0].width * gbobjPoint.dpr;
        canvas.height = res[0].height * gbobjPoint.dpr;
        ctx.scale(gbobjPoint.dpr , gbobjPoint.dpr );

        gbobjPoint.canW = canvas.width/gbobjPoint.dpr;
        gbobjPoint.canH = canvas.height/gbobjPoint.dpr;
        let dblR = Math.min(gbobjPoint.canW/ 13.2, gbobjPoint.canH / 16.2);
        gbobjPoint.R = dblR;
        console.log(gbobjPoint);
        // for (let intI = 0; intI < gbobjPoint.intPoint; intI++) {

        for (let intJ = 0; intJ < 3; intJ++) {
          for (let intK = 0; intK < 3; intK++) {
            let objTmpPoint = new claPoint();
            objTmpPoint.color = arrColor[(intK + intJ * 3) % 10];
            let bolOverlap = false;
            let intTmp = 0;
            // do {
            //   bolOverlap = false;
            //   objTmpPoint.orgx = (Math.random() * 6 + 1) * canvas.width / 8;
            //   objTmpPoint.orgy = (Math.random() * 8 + 1) * canvas.height / 10;
            //   for (let intJ = 0; intJ < intI; intJ++) {
            //     if (Math.sqrt(Math.pow(objTmpPoint.orgx - gbobjPoint.arrPoint[intJ].orgx, 2) + Math.pow(objTmpPoint.orgy - gbobjPoint.arrPoint[intJ].orgy, 2)) < (dblR * 2.5)) {
            //       bolOverlap = true;
            //       // console.log(Math.sqrt(Math.pow(objTmpPoint.x - gbobjPoint.arrPoint[intJ].x, 2) + Math.pow(objTmpPoint.y - gbobjPoint.arrPoint[intJ].y, 2)));
            //     };
            //   };
            //   intTmp++;

            // } while (bolOverlap && intTmp < 100);

            objTmpPoint.orgx = (intK + 1) * gbobjPoint.canW / 4;
            objTmpPoint.orgy = (intJ + 1) * gbobjPoint.canH / 4;
            objTmpPoint.nowx = objTmpPoint.orgx + dblR * (Math.random() * 2 - 1);
            objTmpPoint.nowy = objTmpPoint.orgy + dblR * (Math.random() * 2 - 1);

            // 速度的没有再根据画布大小随机
            gbobjPoint.arrPoint.push(objTmpPoint);
            gbobjPoint.lineP.push(-1);
          };
        };
        // };
        gbobjPoint.roundInv = setInterval(funRoundInv, 30);
      });
  }
})

6. 真正走心的内容

其实我想了好久都没想出到底怎么写这东西比较好，说是深的内容其实也不算，但我也怕以后我忘了代码。
还有因为我妈霸占了厕所我没办法睡觉所以写上来而已。
我一开始本来打算做复杂一点的动画，但后来想着想着还是算了，以后接着做吧，最近工作也很忙，公司压力也大，一直暗示着不乖点干活就要炒人，所以还是得用心工作的呀。

BerryBC
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用css transition属性实现一个带动画显隐的微信小程序部件
炽链客
06-11 1万+
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的，但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使（下面说明）所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation  API来创建动画。接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来，下面上代码index.js page({  ...
微信小程序 界面从右边滑出_微信小程序侧边栏滑动特效(左右滑动)
weixin_39854778的博客
01-14 974
侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~侧边栏特效一先看效果：wxml：第一个item1第二个item2第三个item3第四个item4搭建上下两层界面写一段css3的右移动画样式 .c-state1wxss.c-state1{transform:rotate(0deg) scale(1) translate(7...
微信小程序-微信小程序之Canvas
08-06
We-Canvas 1.We-Canvas之WaveImage 效果图： 实现细节： 1.js: drawImage:function(data){ var that = this var p10= data[0][0]; /* 三阶贝塞尔曲线起点坐标值*/ var p11= data[0][1]; /* 三阶贝塞尔曲线第一个控制点坐标值*/ var p12= data[0][2]; /* 三阶贝塞尔曲线第二个控制点坐标值*/ var p13= data[0][3]; /* 三阶贝塞尔曲线终点坐标值*/ var p20= data[1][0]; var p21= data[1][1]; var p22= data[1][2]; var p23= data[1][3]; var p30= data[2][0]; var p31= data[2][1]; var p32= data[2][2]; var p33= data[2][3]; var t = factor.t; /*计算多项式系数 （下同）*/ var
微信小程序-微信小程序Canvas增强组件
08-07
WeZRender：微信小程序Canvas增强组件 WeZRender是一个微信小程序Canvas增强组件，基于HTML5 Canvas类库ZRender。 使用 WXML： JS： var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("line-canvas-1", 375, 600); 特性 数据驱动 利用WeZRender绘图，只需定义图形数据。 var circle = new wezrender.graphic.shape.Circle( shape: { cx: 50, cy: 50, r: 50 }, style: { fill: 'red', lineWidth: 10 } }); 丰富的图形选项 内置多种图形元素（圆形、椭圆、圆环、扇形、
微信小程序实现侧滑效果(类似QQ侧滑界面)
Ice1774的博客
04-17 445
【代码】微信小程序实现侧滑效果(类似QQ侧滑界面)
canvas实现跳动的小球
Dj_Fairy的博客
11-06 1228
canvas实现主要代码 canvas(centerx,centery,radius,startingAngle,endingAngle,antclockwise=false) canvas(x轴坐标，y轴坐标，角度，开始的角度，结束的角度，顺时针（默认false）/逆时针true) 角度从0开始，一整个圆结束是2PI demo代码 &lt;!DOCTYPE html&gt; &lt;...
仿IOS效果-带弹簧动画的ListView
weixin_33775572的博客
12-30 118
背景介绍 最近项目打算做一个界面,类似于dayone首页的界面效果,dayone 是一款付费应用,目前只有IOS端。作为一个资深懒惰的程序员，奉行的宗旨是绝对不重复造一个轮子。于是乎，去网上找一大堆开源项目，发现没有找到合适的，然后，只能硬着头皮自己来了。先看看效果： 其实写起来也比较简单，就是控制ListView的头部和底部的...
小程序wepy框架--动画（做一个动画弹框）
HelloFei666 的博客
04-25 989
最近微信小程序项目里，做了一个领取优惠券的弹框 源代码如下： <script> import wepy from 'wepy' export default class ShopCart extends wepy.page { config = { navigationBarTitleText: '测试demo' } data = {...
微信小程序-ios系统-弹簧回弹效果，下拉上拉出现白色，如何处理呢？
小天空的博客
12-24 4724
这几天做小程序，有些页面都是全屏的背景，在安卓上背景是固定的，而在ios上上拉下拉出现白色，测试说体验不太好，一开始我以为是下拉上拉刷新造成的，关闭了依然是这样。为了体验好点，可以按一下解决： 方式一： 　　可以在page.json文件内配置 ："backgroundColor": "#ccc" 属性，这个方法比较便捷。但是对于一些全屏背景的页面体验还不是很好 方式二： 　　对于一些全屏背景页面，我们可以让背景固定这样体验会好点，可以按以下进行操作： 　　1》page.json设置"disabl.
122-微信小程序-手势解锁.zip
最新发布
06-11
"122-微信小程序-手势解锁.zip"这个压缩包显然包含了关于如何在微信小程序中实现手势解锁功能的相关资料，其中可能包括源代码和截图，帮助开发者理解和构建类似的功能。 手势解锁是移动设备上常用的一种安全验证...
HTML5 Canvas弹簧式动画特效特效代码
03-20
HTML5 Canvas弹簧式动画特效是一款基于Canvas绘制三角形弹性跳动特效。
微信小程序实现手势滑动卡片效果
11-30
最近工作中有项目要使用微信小程序技术进行开发，其中一项功能困扰了我很久，卡片滑动动效以及手势识别。经过一番研究和参考，现在把成果展示。记录自己踩到的坑，如果大家有需要，也可以帮助到大家。 效果图： 首先是卡片布局的实现： 图片（一） 如图所示，我采用绝对定位absolute的方式，辅助index，可以实现卡片的层叠效果。注意：三张卡片一定都是相同的定位，否则index可能不起作用。 代码： //设置position: absolute; left：50%；后，再 margin-left:负(一半的width)；可以实现水平居中 //同理，设置top：50%；margin-top：负（一半
wxDraw一个轻量级的微信小程序2d动画绘制库
08-10
wxDraw 一个轻量级的微信小程序2d动画绘制库
微信小程序canvas实现椭圆（圆形）缩放
01-09
在微信小程序中，Canvas是用于绘制图形的重要组件，它可以让我们实现丰富的动态视觉效果。本示例专注于使用Canvas绘制椭圆（圆形）并实现其缩放功能。以下将详细讲解实现这个功能所需的知识点： 1. **Canvas API**...
微信小程序canvas实现文字缩放
01-12
在微信小程序中，canvas元素是用于图形绘制的重要组件，它提供了丰富的API，使得开发者能够进行动态的、交互式的...通过熟练掌握canvas API，开发者可以在微信小程序中构建出各种炫酷的图形和动画效果，提升用户体验。
弹性ScrollView-仿微信弹性页面
jimbo_xiaohei的博客
05-03 485
一、先看效果 二、准备工作 要实现这个效果，我的想法是给ScrollView包一个container，然后判断边界值，看当前的touch事件交给谁去处理。回弹的效果交给Scroller处理，甚至可以写出一个下拉刷新，看代码分析吧。 三、代码分析 在dispatchTouchEvent中去判断边界值，dispatchTouchEvent返回true或者false都是自己消费当前事...
android 卡片滑到详情页,微信小程序实现卡片层叠滑动效果
weixin_31184715的博客
05-31 553
本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码，供大家参考，具体内容如下代码：js：// index/gun/jsSwiper2/jsSwiper2.jsPage({/*** 页面的初始数据*/data: {startX: 0,endX: 0,iCenter: 3,datas: [{id: 1,zIndex: 2,opacity: 0.2,left: 40,iamge: "../../...
html左右滑动卡片,微信小程序实现卡片左右滑动效果的示例代码_飛雲_前端开发者...
weixin_34455676的博客
06-09 1156
快放假了，人狠话不多，啥也不说了。先看效果图。思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。卡片滑动的时候有一定的加速度。如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。看到这样的需求，不熟悉小程序的同学，可能感觉有点麻烦。首先需要计算卡片的位置，然后再设置滚动条的位置，使其滚动到指定的位置，而且在滚动的过程中，加上一点加速度…然而，...
如何实现符合物理定律的碰撞及弹开
Gilbert_Sun的专栏
04-14 1553
var angle=Math.atan2(dY,dX); var sine=Math.sin(angle); var cosine=Math.cos(angle); var x=0; var y=0; var xB=dX*cosine+dY*sine; var yB=dY*cosine-dX*sine; var vX=ball.vX*cosine+ball.vY*sine; var vY=
微信小程序canvas
04-04
微信小程序的canvas是一个可以绘制图形的API，它可以用来绘制2D图形和动画。在微信小程序中，我们可以使用canvas来实现一些比较复杂的图形和动画效果，比如游戏、数据可视化等。 使用canvas需要注意以下几点： 1. 首先需要在wxml文件中添加canvas标签，并设置宽高等属性。 2. 在js文件中获取canvas对象，并使用canvas的API来绘制图形和动画。 3. canvas绘制图形和动画的核心是使用绘图上下文（context），我们可以通过canvas.getContext('2d')方法获取到2D绘图上下文。 4. 绘制图形和动画需要使用一些基本的API，比如绘制矩形、圆形、文本等，同时也可以使用一些高级API来实现更加复杂的效果。 5. 在绘制动画时需要使用到定时器，可以使用setInterval或者requestAnimationFrame方法。 6. 在绘制图形和动画时需要注意性能问题，尽量避免频繁的重绘和过于复杂的绘制操作。 总之，使用canvas可以为微信小程序增加更多的交互性和动态性，但需要注意性能问题和代码的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值