小程序动画与 Canvas 实践：交互动效、海报生成与可视化

/* transition：状态变化时的补间动画 */
.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.card.active {
  transform: scale(1.05);
  opacity: 0.8;
}

/* animation + keyframes：循环/自动播放动画 */
@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}
.live-dot {
  animation: pulse 1.6s ease-in-out infinite;
}

// pages/card/card.js
Page({
  data: { animData: {} },

  onRotate() {
    const anim = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease-out',
      delay: 0,
      transformOrigin: '50% 50%'
    });

    anim.rotate(360).scale(1.1).step();       // 定义动画序列
    this.setData({ animData: anim.export() }); // 导出动画数据
  }
});

<!-- pages/card/card.wxml -->
<view class="card" animation="{{animData}}" bindtap="onRotate">卡片</view>

// 图片缩放：双指捏合
Page({
  data: { scale: 1, baseScale: 1, touches: [] },

  onTouchStart(e) {
    this.data.baseScale = this.data.scale;
    this.data.touches = e.touches;
  },

  onTouchMove(e) {
    if (e.touches.length === 2) {
      // 计算两指距离变化 → 更新缩放值
      const dist = Math.hypot(
        e.touches[0].clientX - e.touches[1].clientX,
        e.touches[0].clientY - e.touches[1].clientY
      );
      const ratio = dist / this.data.initDist;
      this.setData({ scale: this.data.baseScale * ratio });
    }
  }
});

<!-- 弹层淡入示例 -->
<view class="mask" wx:if="{{visible}}" bindtap="close">
  <view class="dialog" style="transition: transform .3s, opacity .3s;">
    内容
  </view>
</view>

<!-- 新版 Canvas 2D -->
<canvas type="2d" id="chartCanvas" style="width: 100%; height: 400px;"></canvas>

// 获取 Canvas 2D 节点并做高清屏适配
async function getCanvas(id) {
  const query = wx.createSelectorQuery();
  const res = await new Promise((resolve) => {
    query.select('#' + id).fields({ node: true, size: true }).exec((data) => {
      resolve(data[0] || null);
    });
  });
  if (!res) return null;

  const canvas = res.node;
  const dpr = wx.getWindowInfo().pixelRatio;
  canvas.width = res.width * dpr;       // 画布物理像素 = CSS 宽 × dpr
  canvas.height = res.height * dpr;
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);                  // 坐标系对齐 CSS 像素
  return { canvas, ctx, width: res.width, height: res.height };
}

// components/share-card/index.js
Component({
  methods: {
    async getCanvas(id) {
      const query = wx.createSelectorQuery().in(this);   // 关键：组件内查询
      const res = await new Promise((resolve) => {
        query.select('#' + id).fields({ node: true, size: true }).exec((d) => resolve(d[0] || null));
      });
      if (!res) return null;

      const canvas = res.node;
      const dpr = wx.getWindowInfo().pixelRatio;
      canvas.width = res.width * dpr;
      canvas.height = res.height * dpr;
      const ctx = canvas.getContext('2d');
      ctx.scale(dpr, dpr);
      return { canvas, ctx, width: res.width, height: res.height };
    }
  }
});

// 绘制分享海报
async function drawPoster() {
  const { ctx, width, height } = await getCanvas('posterCanvas');

  // 1. 背景
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, width, height);

  // 2. 异步加载图片（必须先 await 再 drawImage，否则白屏）
  const img = await loadImage('https://cdn.example.com/bg.jpg');
  ctx.drawImage(img, 0, 0, width, height);

  // 3. 文字（换行需自行处理）
  ctx.fillStyle = '#333333';
  ctx.font = '16px sans-serif';
  ctx.fillText('扫码了解详情', 24, 60);
}

// 图片加载工具：兼容不同平台
function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = wx.createImage();     // Canvas 2D 环境下的图片对象
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error('图片加载失败：' + src));
    img.src = src;
  });
}

// 导出 Canvas 为临时图片
function exportPoster(canvas) {
  return new Promise((resolve, reject) => {
    wx.canvasToTempFilePath({
      canvas,                        // Canvas 2D 传入节点对象
      fileType: 'png',
      quality: 1,
      success: (res) => resolve(res.tempFilePath),
      fail: reject
    });
  });
}

// 保存到相册（需 scope.writePhotosAlbum 授权）
async function saveToAlbum(filePath) {
  try {
    await wx.saveImageToPhotosAlbum({ filePath });
    wx.showToast({ title: '已保存到相册' });
  } catch (err) {
    if (err.errMsg.includes('auth')) {
      // 引导用户去设置页开启相册权限
      wx.showModal({
        title: '需要相册权限',
        content: '请在设置中开启「保存到相册」权限',
        confirmText: '去设置',
        success: () => wx.openSetting()
      });
    }
  }
}

// ec-canvas 使用示例
const echarts = require('../../ec-canvas/echarts');

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr });
  canvas.setChart(chart);
  chart.setOption({
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [120, 200, 150] }]
  });
  return chart;
}

// 离屏 Canvas 示例：先画到离屏再合并
async function drawWithOffscreen() {
  const { canvas, ctx } = await getCanvas('main');
  const off = wx.createOffscreenCanvas({ type: '2d', width: 100, height: 100 });
  const octx = off.getContext('2d');
  octx.fillStyle = '#ff5500';
  octx.arc(50, 50, 40, 0, Math.PI * 2);
  octx.fill();
  ctx.drawImage(off, 16, 16, 100, 100);   // 一次性合并到主画布
}