Skip to content

特效

這一節需要用到CSS。

也需要你掌握前一節的內容。

使用特效

人物特效

潘大爺 [灰]「什麼情況！」

這裏的 灰 就是特效。
使用一個用方括號 [] 圈住特效名來爲人物添加特效。

如果你忘記了語法，可以倒回去看 用戶指南/劇本寫法。

DOM對象特效

> EF adv畫面 灰

爲 id='adv畫面' 的元素設置特效「灰」。
在應用之後整個場景都會變成灰的。

這是樣例效果，分別是原本、人物特效、DOM對象特效適用的結果。

樣例.webp

(並不是你的視力有問題而是我偷偷調大了飽和度……)

定義特效

Librian使用CSS來實現特效，每個特效都會被渲染爲元素的 特效 屬性。

首先，在上個章節 CSS與HTML 中指定「自定css」後，向你的CSS添加屬性選擇器。

我們以實現一個 喘氣 特效爲例，用 keyframes 和 animation 屬性，讓特效成爲動畫——

@-webkit-keyframes _喘氣{
    0%{transform: translateY(0px);}
    50%{transform: translateY(4px);}
    100%{transform: translateY(0px);}
}
[特效~=喘氣]{
    animation:_喘氣 0.7s linear infinite;
}

然後在人物處應用: 

潘大爺 [喘氣](大笑)「心靈信標就在這裏了。」

上下.webp (注意看這是動圖)

大成功！

使用SVG動畫實現特效

有一些特效用純CSS實現起來有點麻煩，如果你不是CSS大師的話，也可以用SVG動畫來代替。

首先，先用稱手的工具製作一個SVG。
比如用Adobe Animate，然後通過Flash2Svg插件導出SVG，它看起來是這樣——

an.png

然後使用CSS僞類將它加入到畫面中——

[特效~=冰霜噴吐]::after{
    content: ' ';
    display: block;
    position: absolute;
    top: 260px;
    left: 360px;
    height: 115px;
    width: 230px;
    background: url('./冰霜噴吐.svg');
}

之後，當我們在劇本中爲 潘大爺 指定 冰霜噴吐 特效時，就會出現這個動畫。

潘大爺 [冰霜噴吐]「唉～」

潘大爺冰霜噴吐.webp

注意

DOM對象特效是持續的。如果在語法中不指定特效，就會把原有的特效清除。

DOM對象的特效和立繪的特效不加區分，同一個CSS選擇器可以對兩者使用。

內置的特效

基本上只做測試用，能派上用場的特效還得你自己寫。

  • 灰
    使目標變成灰色(去除飽和度)。
  • 透明
    使目標變得透明(施加一半的透明度)。
  • 淡入
    在出現時使用動畫，短暫的漸變。
  • 下入
    在出現時使用動畫，短暫的從下方的漸變。