버전 비교

이전 버전 14

changes.mady.by.user AST01

에 저장

비교대상

새 버전 현재

changes.mady.by.user AST01

에 저장

키

  • 이 줄이 추가되었습니다.
  • 이 줄이 삭제되었습니다.
  • 서식이 변경되었습니다.
댓글: Content imported from a Scroll Translations translation file.

...

Sv translation
languagede

Erstellen von angepassten Effekten

Angepasste Effekte können auf die für Animationseffekte erstellten CSS-Skript-Elemente angewendet werden.

정보
titleHinweis

Einzelheiten zur Anwendung von Animationseffekten finden Sie hier. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Klicken Sie in der Werkzeugleiste am oberen Rand der Bearbeitungsseite von Web Author auf (Angepassten Effekt hinzufügen). Wenn ein Pop-up-Fenster erscheint, stellen Sie die folgenden Elemente der Reihe nach ein und erstellen Sie dann das CSS-Skript.

  • *Effektname

    Geben Sie den Namen des CSS-Skripts ein. Wenn der Effektname festgelegt wird, wird das CSS-Skriptfeld automatisch aktiviert und der Effektname wird als Klassenname verwendet.

    정보
    titleHinweis
    • Der Effektname kann alphanumerische Zeichen enthalten und darf nicht mit einer Zahl beginnen.
    • Der Effektname kann nur den Unterstrich (_) und den Bindestrich (-) enthalten.
    • Wenn Sperren markiert ist, können nur Benutzer mit Berechtigung zum Sperren angepasste Effekte bearbeiten oder löschen.

  • Effekttyp

    Sie können bestimmen, ob angepasste Effekte unter allgemein oder bei Innerhalb, Hervorheben und Außerhalb hinzugefügt werden sollen.

  • *CSS-Skript

    Erstellen Sie ein CSS-Skript. Geben Sie vor dem Erstellen zuerst den Effektnamen ein.

    정보
    titleHinweis
    • Das CSS-Skript kann nur auf Englisch geschrieben werden.
    • Wenn Sie die Animationseigenschaft oder ihren Namen während dem Erstellen eines CSS-Skripts eingeben, wird das @keyframes-Kennwort automatisch zum Animationsnamen hinzugefügt. Wird der Name einer Animationseigenschaft im CSS-Skript geändert, wird der Animationsname des @keyframes-Kennworts automatisch geändert.
    • Der Name der Animationseigenschaft folgt denselben Regeln wie bei dem Erstellen des Effektnamens. Außerdem können die Wörter „keine/r/s“, „aufheben“, „Anfangs-“ oder „übernehmen“ nicht verwendet werden.
정보
titleHinweis

* ist erforderlich.

Empfehlungen für das Erstellen von CSS-Skript

Beim Erstellen eines Animationsskripts mithilfe von @keyframe wird für maximale Leistung empfohlen, die folgenden Eigenschaften auf einem Tizen-Gerät zu verwenden.

  • Für die transform-Eigenschaft ist die Umwandlung von Drehung, Maßstab und Krümmung möglich.

    • Verschieben: translate(x, y)
    • Maßstab: scale(x, y)
    • Drehen: rotate(angle)
    • Krümmen: skew(x-angle, y-angle)
  • Die Eigenschaft opacity passt die Transparenz des Elements an.
정보
titleHinweis
  • Die Wiedergabe kann aufgrund übermäßiger Effekte auf einem Tizen-Gerät womöglich nicht glatt laufen.
  • Bei scale kann die Wiedergabe im Vergleich zu anderen Effekten womöglich nicht glatt laufen.

Beispiel für das Erstellen eines CSS-Skripts

Erstellen Sie in Bezugnahme auf das folgende Beispiel das CSS-Skript und wenden Sie die angepassten Effekte auf die Elemente an.

Umwandlung der Bildfarbe in Graustufen

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

Absteigend von oben nach unten

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }
Sv translation
languageit

Creazione di effetti personalizzati

Gli effetti personalizzati possono essere applicati agli elementi di script CSS creati per gli effetti animazione.

정보
titleNota

Per informazioni dettagliate sull'applicazione di effetti animazione, vedere la sezione indicata di seguito. ▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Image Added

Fare clic su Image Added(Aggiungi effetto personalizz.) nella barra degli strumenti nella parte superiore della pagina di modifica di Web Author. Quando viene visualizzata la finestra popup, impostare in sequenza gli elementi seguenti, quindi creare lo script CSS.

  • *Nome effetto

    Immettere il nome dello script CSS. Quando si imposta il nome dell'effetto, il campo script CSS viene attivato automaticamente e il nome dell'effetto viene utilizzato come nome della classe.

    정보
    titleNota
    • Il nome dell'effetto può contenere caratteri alfanumerici e non può iniziare con un numero.
    • Il nome dell'effetto può includere solo caratteri di sottolineatura (_) e trattini (-).
    • Quando si seleziona Blocca, solo gli utenti con autorizzazione di blocco possono modificare ed eliminare effetti personalizzati.

  • Tipo di effetto

    È possibile determinare se aggiungere effetti personalizzati in comune o se aggiungere Entrata, Evidenziazione e Uscita.

  • *Script CSS

    Creare uno script CSS. Prima della creazione, immettere il Nome effetto.

    정보
    titleNota
    • Lo script CSS può essere scritto solo in inglese.
    • Quando si immette la proprietà di animazione o il relativo nome durante la creazione di uno script CSS, la parola chiave @keyframes viene aggiunta automaticamente con il nome dell'animazione. Quando si modifica il nome della proprietà di animazione nello script CSS, il nome dell'animazione della parola chiave @keyframes viene modificato automaticamente.
    • Il nome della proprietà di animazione segue la stessa regola associata alla creazione del Nome effetto. Non è possibile utilizzare i termini "none", "unset", "initial", o "inherit".
정보
titleNota

*È un termine obbligatorio.

Consiglio per la creazione di script CSS

Quando si crea lo script di animazione utilizzando @keyframe, è consigliabile utilizzare le proprietà seguenti in un dispositivo Tizen per ottenere prestazioni ottimali.

  • Per la proprietà transform, è possibile eseguire la conversione di rotazione, scala, movimento e torsione.

    • Movimento: translate(x, y)
    • Scala: scale(x, y)
    • Rotazione: rotate(angle)
    • Torsione: skew(x-angle, y-angle)
  • La proprietà opacity regola la trasparenza dell'elemento.
정보
titleNota
  • Su un dispositivo Tizen la riproduzione potrebbe non risultare omogenea a causa di un effetto eccessivo.
  • In caso di scale, la riproduzione potrebbe non risultare omogenea rispetto ad altri effetti.

Esempio di creazione dello script CSS

Facendo riferimento all'esempio seguente, creare lo script CSS e applicare effetti personalizzati agli elementi.

Conversione del colore dell'immagine in scala dei grigi

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

Decrescente dall'alto al basso

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }
Sv translation
languagees

Creación de efectos personalizados

Se pueden aplicar efectos personalizados a los elementos de script de CSS creados para efectos de animación.

정보
titleNota

Para obtener información sobre la aplicación de los efectos de animación, consulte lo siguiente. ▶애니메이션 효과 적용하기

Stylesheet
classscreen

Image Added

Haga clic en Image Added(Añadir efecto personalizado) en la barra de herramientas de la parte superior de la página de edición de Web Author. Cuando aparezca una ventana emergente, establezca los siguientes elementos secuencialmente y, a continuación, cree el script de CSS.

  • *Nombre del efecto

    Introduzca el nombre del script de CSS. Cuando se defina el nombre del efecto, se activará automáticamente el campo de script de CSS y se utilizará el nombre del efecto como nombre de la clase.

    정보
    titleNota
    • El nombre del efecto puede tener caracteres alfanuméricos y no puede comenzar por un número.
    • El nombre del efecto solo puede incluir el guion bajo (_) y el guion (-).
    • Cuando se selecciona Bloquear, solo los usuarios con permiso de bloqueo pueden editar o eliminar efectos personalizados.

  • Tipo de efecto

    Puede determinar si desea añadir efectos personalizados en común o añadir cualquiera de las opciones Entrada, Resaltado y Salida.

  • *Script de CSS

    Cree un script de CSS. Antes de crearlo, introduzca primero el Nombre del efecto.

    정보
    titleNota
    • El script de CSS solo se puede escribir en inglés.
    • Cuando introduzca la propiedad de animación o su nombre durante la creación de un script de CSS, la palabra clave @keyframes se añadirá automáticamente con el nombre de la animación. Cuando el nombre de la propiedad de animación se cambia en el script de CSS, el nombre de animación de la palabra clave @keyframes se cambia automáticamente.
    • El nombre de la propiedad de animación sigue la misma regla que en la creación del Nombre del efecto. Además, no se puede utilizar el término “ninguno”, “no establecido”, “inicial” ni “heredado”.
정보
titleNota

* es un artículo requerido.

Recomendación para la creación de scripts de CSS

Al crear el script de animación mediante @keyframe, se recomienda utilizar las siguientes propiedades en un dispositivo Tizen para obtener el mejor rendimiento.

  • Para la propiedad transform, es posible la conversión de giro, escala, movimiento y torsión.

    • Mover: translate(x, y)
    • Escalar: scale(x, y)
    • Girar: rotate(angle)
    • Torsionar: skew(x-angle, y-angle)
  • La propiedad opacity ajusta la transparencia del elemento.
정보
titleNota
  • Es posible que la reproducción no sea fluida en un dispositivo Tizen debido a un efecto excesivo.
  • En caso de scale, es posible que la reproducción no sea tan fluida como con otros efectos.

Ejemplo de creación de scripts de CSS

Haciendo referencia al siguiente ejemplo, cree el script de CSS y aplique efectos personalizados a los elementos.

Conversión de imágenes en color a escala de grises

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

Descenso de arriba a abajo

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }
Sv translation
languagezh_CN

创建定制效果

定制效果可以应用于为动画效果创建的 CSS 脚本元素。

정보
title注

有关动画效果应用的详情，请参阅下文。▶ 애니메이션 효과 적용하기

Stylesheet
classscreen

Image Added

单击 Web Author 编辑页面顶部的工具栏中的 Image Added（添加定制效果）。当弹出窗口出现时，依次设置以下项，然后创建 CSS 脚本。

  • *效果名称

    输入 CSS 脚本的名称。设置效果名称后，CSS 脚本字段将自动激活，并将效果名称用作类名称。

    정보
    title注
    • 效果名称可以包含字母数字字符，并且不能以数字开头。
    • 效果名称只能包含下划线 (_) 和连字符 (-)。
    • 如果选中了锁定，仅具有锁定权限的用户可编辑或删除定制效果。

  • 效果类型

    您可以决定是否添加共有定制效果或添加进入、强调和退出中的任一个。

  • *CSS 脚本

    创建 CSS 脚本。在创建之前，先输入效果名称。

    정보
    title注
    • CSS 脚本只能用英语编写。
    • 在创建 CSS 脚本期间输入动画属性或其名称时，@keyframes 关键字将自动添加动画名称。在 CSS 脚本中更改动画属性的名称时，@keyframes 关键字的动画名称将自动更改。
    • 动画属性的名称遵循与创建效果名称相同的规则。此外，不能使用词“none”、“unset”、“initial”或“inherit”。
정보
title注

* 是必要项。

CSS 脚本创建的建议

使用 @keyframe 创建动画脚本时，建议在 Tizen 设备中使用以下属性以获得最佳性能。

  • 对于 transform 属性，可转换旋转旋转、缩放、移动和曲折。

    • 移动：translate(x, y)
    • 缩放：scale(x, y)
    • 旋转：rotate(angle)
    • 扭曲：skew(x-angle, y-angle)
  • opacity 属性调节元素的透明度。
정보
title注
  • 由于过度效果，播放在 Tizen 设备上可能不流畅。
  • 对于 scale，和其他效果相比，播放可能不顺畅。

CSS 脚本创建示例

请参考下面的示例，创建 CSS 脚本并向元素应用定制效果。

图像颜色到灰度的转换

.grayScale { animation: grayscale 1s infinite; } @keyframes grayscale { 0% { filter: grayscale(0%); } 50%{ filter: grayscale(100%); } 100%{ filter: grayscale(0%); } }

从顶部到底部下降

.bounce-in { animation: bounce 1.1s both; } @keyframes bounce { 0% { transform: translateY(-500px); animation-timing-function: ease-in; opacity: 0; } 25% { transform: translateY(0); animation-timing-function: ease-out; opacity: 1; } 40% { transform: translateY(-250px); animation-timing-function: ease-in; } 60% { transform: translateY(0); animation-timing-function: ease-out; } 70% { transform: translateY(-100px); animation-timing-function: ease-in; } 78% { transform: translateY(0); animation-timing-function: ease-out; } 85% { transform: translateY(-30px); animation-timing-function: ease-out; } 90% { transform: translateY(0); animation-timing-function: ease-out; } 95% { transform: translateY(-20px); animation-timing-function: ease-in; } 100% { transform: translateY(0); animation-timing-function: ease-out; } }