PHP は WeChat ミニ プログラム用の CSS3 アニメーション技術を実装します

モバイル インターネットの急速な発展に伴い、WeChat ミニ プログラムは企業や個人がビジネスを行うための重要なチャネルの 1 つになりました。ユーザーの注意を引き、ミニ プログラムのユーザー エクスペリエンスを向上させるために、多くの開発者は CSS3 アニメーション技術を使用して精巧なミニ プログラム インターフェイスを設計しています。この記事では、開発者がミニ プログラムをより適切に設計できるように、PHP の WeChat ミニ プログラムに CSS3 アニメーションを実装するためのテクニックを共有します。

1. CSS3 アニメーションの概要

CSS3 アニメーションは、CSS3 プロパティを使用して要素のスタイルを変更し、アニメーション効果を生み出すテクノロジーです。単純なフェードイン、フェードアウト、回転、スケーリングから、複雑なパスアニメーション、重力効果など、さまざまなアニメーション効果を実現できます。従来の JavaScript アニメーション効果と比較して、CSS3 アニメーションはコードが単純であるだけでなく、遅延なくよりスムーズに実行されます。

2. CSS3 アニメーションの基礎知識

WeChat アプレットに CSS3 アニメーションを実装する前に、まず CSS3 アニメーションの基本概念とプロパティをいくつか理解しましょう。

1. @keyframes Keyframes

@keyframes は CSS3 アニメーションの基本構文で、以下に示すように、アニメーション効果のキー フレームを定義するために使用されます。

##animation アニメーション プロパティ

2. animation は CSS3 アニメーション プロパティの略称で、アニメーションの実装内容やアニメーションの名前を定義できます。その構文は次のとおりです。

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

例:

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

このうち、slideInLeft はキー フレームの名前、1s はアニメーションの継続時間、ease はモーション カーブ、0s はアニメーションの時間、遅延時間、1 は繰り返し回数、通常はアニメーションの再生状態です。

transform 属性

3. CSS3 アニメーションは主に、回転、拡大縮小、平行移動、傾きなどの要素の変形効果を実現するために、transform 属性を使用します。構文は次のとおりです:

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

例:

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

このうち、translateXとscaleは2つの変換関数で、translateXは要素の水平方向の移動を実現し、scaleは要素の水平移動を実現します。要素のスケーリング効果。

3. PHP による CSS3 アニメーションの実装

次に、PHP を使用して WeChat アプレットの CSS3 アニメーション効果を実装する方法を学びましょう。

アニメーション クラスの作成

1. まず、アニメーション効果の関連プロパティとメソッドをカプセル化するアニメーション クラスを作成する必要があります。コードは次のとおりです。

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

アニメーション コレクション クラスの作成

2. 次に、アニメーション効果の複数のセットをカプセル化するために、AnimationSet クラスを作成する必要があります。コードは次のとおりです。

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;
  }
}

CSS スタイル シートの生成

3. 最後に、アニメーション効果の CSS スタイル シートを生成し、WeChat アプレットに適用する必要があります。 。コードは次のとおりです:

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;
  }
}

4. アニメーション効果を適用する

CSS スタイル シートが正常に生成されたので、次にそれを WeChat アプレットに適用する必要があります。 wxml ファイルでは、要素にアニメーション属性を追加することでアニメーション効果を実現できます。例:

$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>";

対応する js ファイルで、onLoad コールバック関数をページに追加してアニメーション効果を設定する必要があります。

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

onLoad関数のwx.createAnimation関数を使用してアニメーションを作成し、変数としてエクスポートし、wxmlファイルのアニメーション属性に代入してアニメーション効果を適用します。

概要

この記事では、PHP を介して WeChat アプレットに CSS3 アニメーションを実装し、CSS3 アニメーションの基本プロパティと使用法を詳細に紹介し、サンプル コード効果を通じて WeChat アプレットにアニメーションを適用する方法を示します。この記事がすべての開発者の役に立ち、WeChat ミニ プログラムがより絶妙なアニメーション効果を表現できるようになることを願っています。

以上がPHP は WeChat ミニ プログラム用の CSS3 アニメーション技術を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。