PHP melaksanakan teknik animasi CSS3 untuk program mini WeChat

Dengan perkembangan pesat Internet mudah alih, program mini WeChat telah menjadi salah satu saluran penting untuk perusahaan dan individu menjalankan perniagaan. Untuk menarik perhatian pengguna dan meningkatkan pengalaman pengguna program mini, banyak pembangun menggunakan teknik animasi CSS3 untuk mereka bentuk antara muka program mini yang indah. Dalam artikel ini, kami akan berkongsi teknik untuk melaksanakan animasi CSS3 dalam program mini WeChat dalam PHP, dengan harapan dapat membantu pembangun mereka bentuk program mini dengan lebih baik.

1. Gambaran keseluruhan animasi CSS3

Animasi CSS3 ialah teknologi yang menggunakan sifat CSS3 untuk menukar gaya elemen untuk menghasilkan kesan animasi. Ia boleh mencapai pelbagai kesan animasi daripada mudah pudar masuk dan pudar, putaran, penskalaan, kepada animasi laluan kompleks, kesan graviti, dsb. Berbanding dengan kesan animasi JavaScript tradisional, animasi CSS3 bukan sahaja mempunyai kod yang lebih ringkas, tetapi juga berjalan dengan lebih lancar tanpa ketinggalan.

2. Pengetahuan asas animasi CSS3

Sebelum melaksanakan animasi CSS3 dalam program mini WeChat, mari kita fahami beberapa konsep asas dan sifat animasi CSS3.

1. @keyframes Keyframes

@keyframes ialah sintaks asas animasi CSS3, yang digunakan untuk mentakrifkan keyframes kesan animasi, seperti yang ditunjukkan di bawah:

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  
  to {
    transform: translateX(0);
  }
}

2. atribut animasi animasi

animasi ialah singkatan atribut animasi CSS3, yang boleh mentakrifkan butiran pelaksanaan animasi dan nama animasi. Sintaksnya adalah seperti berikut:

animation: 动画名称 持续时间 运动曲线 延迟时间 重复次数 动画播放状态;

Contohnya:

.animation {
  animation: slideInLeft 1s ease 0s 1 normal;
}

Antaranya, slideInLeft ialah nama bingkai kunci, 1s ialah tempoh animasi, ease ialah lengkung gerakan, 0s ialah masa tunda, 1 ialah bilangan ulangan, normal ialah keadaan main balik animasi.

3. transformasi atribut

Animasi CSS3 terutamanya menggunakan atribut transformasi untuk mencapai kesan ubah bentuk elemen, seperti putaran, penskalaan, terjemahan, kecondongan, dsb. Sintaksnya adalah seperti berikut:

transform: 转换函数1(参数1, 参数2, ...) 转换函数2(参数1, 参数2, ...);

Contohnya:

.transform {
  transform: translateX(100px) scale(0.8);
}

Antaranya, translateX dan skala ialah dua fungsi penukaran translateX digunakan untuk merealisasikan pergerakan mendatar elemen, manakala skala boleh merealisasikan kesan penskalaan unsur .

3. Laksanakan animasi CSS3 dengan PHP

Sekarang, mari kita pelajari cara menggunakan PHP untuk melaksanakan kesan animasi CSS3 applet WeChat.

1. Buat kelas animasi

Pertama, kita perlu mencipta kelas Animasi untuk merangkum sifat dan kaedah kesan animasi yang berkaitan. Kodnya adalah seperti berikut:

class Animation {
  public $name; // 动画名称
  public $duration; // 动画持续时间
  public $timingFunction; // 运动曲线
  public $delay; // 延迟时间
  public $iterationCount; // 重复次数
  public $direction; // 动画播放方向
  public $fillMode; // 动画填充模式
  public $keyFrames; // 关键帧
  public function __construct($name) {
    $this->name = $name;
  }
  public function setDuration($duration) {
    $this->duration = $duration;
  }
  public function setTimingFunction($timingFunction) {
    $this->timingFunction = $timingFunction;
  }
  public function setDelay($delay) {
    $this->delay = $delay;
  }
  public function setIterationCount($iterationCount) {
    $this->iterationCount = $iterationCount;
  }
  public function setDirection($direction) {
    $this->direction = $direction;
  }
  public function setFillMode($fillMode) {
    $this->fillMode = $fillMode;
  }
  public function setKeyFrames($keyFrames) {
    $this->keyFrames = $keyFrames;
  }
  public function __toString() {
    return $this->serialize();
  }
  private function serialize() {
    $str = $this->name." {
";
    $str .= "  animation-duration: ".$this->duration.";
";
    $str .= "  animation-timing-function: ".$this->timingFunction.";
";
    $str .= "  animation-delay: ".$this->delay.";
";
    $str .= "  animation-iteration-count: ".$this->iterationCount.";
";
    $str .= "  animation-direction: ".$this->direction.";
";
    $str .= "  animation-fill-mode: ".$this->fillMode.";
";
    $str .= "  animation-name: ".$this->name.";
";
    $str .= "}
";
    $str .= "@keyframes ".$this->name." {
";
    foreach($this->keyFrames as $percent => $properties) {
      $str .= "  ".$percent."% {
";
      foreach($properties as $property => $value) {
        $str .= "    ".$property.": ".$value.";
";
      }
      $str .= "  }
";
    }
    $str .= "}
";
    return $str;
  }
}

2. Buat kelas koleksi animasi

Seterusnya, kita perlu mencipta kelas AnimationSet untuk merangkum beberapa set kesan animasi. Kodnya adalah seperti berikut:

class AnimationSet {
  public $animations = array(); // 动画集合
  public function addAnimation($animation) {
    array_push($this->animations, $animation);
    return $animation;
  }
  public function __toString() {
    $str = "";
    foreach($this->animations as $animation) {
      $str .= $animation->__toString();
    }
    return $str;
  }
}

3. Jana helaian gaya CSS

Akhir sekali, kita perlu menjana helaian gaya CSS untuk kesan animasi dan gunakannya dalam applet WeChat . Kodnya adalah seperti berikut:

$animation1 = new Animation("slideInLeft");
$animation1->setDuration("1s");
$animation1->setTimingFunction("ease");
$animation1->setDelay("0s");
$animation1->setIterationCount("1");
$animation1->setDirection("normal");
$animation1->setFillMode("both");
$keyFrames1 = array(
  "0" => array(
    "transform" => "translateX(-100%)"
  ),
  "100" => array(
    "transform" => "translateX(0)"
  )
);
$animation1->setKeyFrames($keyFrames1);

$animation2 = new Animation("fadeIn");
$animation2->setDuration("1s");
$animation2->setTimingFunction("ease");
$animation2->setDelay("0s");
$animation2->setIterationCount("1");
$animation2->setDirection("normal");
$animation2->setFillMode("both");
$keyFrames2 = array(
  "0" => array(
    "opacity" => "0"
  ),
  "100" => array(
    "opacity" => "1"
  )
);
$animation2->setKeyFrames($keyFrames2);

$animationSet = new AnimationSet();
$animationSet->addAnimation($animation1);
$animationSet->addAnimation($animation2);

echo "<style>".$animationSet->__toString()."</style>";

4. Guna kesan animasi

Memandangkan kita telah berjaya menghasilkan helaian gaya CSS, seterusnya, kita perlu menerapkannya dalam applet WeChat. Dalam fail wxml, kita boleh mencapai kesan animasi dengan menambahkan atribut animasi pada elemen. Contohnya:

<view class="slideInLeft" animation="{{animation1}}">这是一个左滑进入的动画效果</view>
<view class="fadeIn" animation="{{animation2}}">这是一个淡入效果</view>

Dalam fail js yang sepadan, kita perlu menambah fungsi panggil balik onLoad pada halaman untuk menetapkan kesan animasi.

Page({
  data: {
    animation1: "",
    animation2: ""
  },
  onLoad: function() {
    var animation1 = wx.createAnimation({duration: 1000});
    animation1.translateX(0).step();
    var animation2 = wx.createAnimation({duration: 1000});
    animation2.opacity(1).step();
    this.setData({
      animation1: animation1.export(),
      animation2: animation2.export()
    });
  }
});

Buat animasi dengan menggunakan fungsi wx.createAnimation dalam fungsi onLoad dan eksportnya sebagai pembolehubah, dan tetapkan ia kepada atribut animasi dalam fail wxml untuk menggunakan kesan animasi.

Ringkasan

Artikel ini melaksanakan animasi CSS3 dalam applet WeChat melalui PHP, memperkenalkan sifat asas dan penggunaan animasi CSS3 secara terperinci dan menunjukkan cara menggunakan animasi dalam applet WeChat melalui contoh kod Effect. Saya harap artikel ini akan membantu semua pembangun, supaya program mini WeChat dapat mempersembahkan kesan animasi yang lebih indah.

Atas ialah kandungan terperinci PHP melaksanakan teknik animasi CSS3 untuk program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!