Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Ripple

Ripple

Blocks

Blocks

Reeded Glass

Reeded Glass

Shutters

Shutters

Pixel Scan

Pixel Scan

Distortion

Distortion

Burn

Burn

Error

Error

Crack

Crack

Scan

Scan

Ripple

Ripple Icon
Ripple Icon
Ripple Icon

Ripple 为你的作品带来独特的扭曲视角。它模拟液体的表面张力,使画面呈现出放射状的水波效果,观众将看到画面从涌动到平静。Ripple 特别适用于展示具有艺术氛围的作品,帮助你营造出时尚、神秘、动感的氛围,让你的作品引人入胜。

Copy Component

属性控制

Wave: Count (Number: 0 - 100) 

波的数量。较大的值会创造出更密集的涟漪。

Wave: Spacing (Number: 0 - 100) 

波的间距。较大的值会让波之间更远,弯曲更加平滑。

Wave: Height (Number: 0 - 100) 

波的高度。较大的值会让波中的画面更扭曲。

Advance: Move (Boolean: Yes/No)

位移效果。当启用时,扭曲将在动画进行时伴随位移效果。

Advance: Speed (Number: 0 - 1)

位移的速度。较大的值会让移动速度更快。

Advance: Keep Distorting (Boolean: Yes/No)

保持扭曲。当启用时,扭曲效果将不再随着动画进行而逐渐变弱。

Advance: Reverse (Boolean: Yes/No)

反转位移。当启用时,位移方向将进行反转,从扩散转变为收缩。

Advance: Fade In (Boolean: Yes/No)

启用或禁用淡入效果。当启用时,可以通过 “Advance: Opacity” 与 “Advance: Scale” 设置初始状态。

Advance: Opacity (Number: 0 - 1)

出现动画的透明度。设置为 0 时,会有一个短暂的淡入效果。

Advance: Scale (Number: 0 - 10)

出现动画的缩放倍数。较大的值能够带来短暂的缩放效果。

将组件作为巢内组件时,可以使用以下属性。

Animation Start (EventHandler: onAnimationStart)

当动画开始时触发事件。

Animation End (EventHandler: onAnimationEnd)

当动画结束时触发事件。

Video End (EventHandler: onVideoEnd)

当视频播放结束时触发事件,当 Loop 为 Yes 时,这个事件不会被触发。

Media Loaded (EventHandler: onMediaload)

当媒体载入完成时触发事件。

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Wave

5, 4, 10

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Wave

5, 4, 10

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Wave

5, 4, 10

Advance

Move

Animate

Appear

Transition

Spring

Variant 1

Variant 2

特性

随心使用你的图片或视频

使用滚动动画来触发效果

使用滚动变换创建交互式体验

使用滚动变换创建交互式体验。

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

在任意进度停止动画

下一个

Variant 1

Variant 2

Video

by

Cássio Nunes

Variant 1

Variant 2

Video

by

Cássio Nunes

Reveals cool WebGL Effects Components for Framer.