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

Distortion

Distortion Icon
Distortion Icon
Distortion Icon

Distortion 为你的作品带来类似相机镜头的失真效果,这种效果特别适合展示具有动感和戏剧性的作品。它能够为你的作品添加独特的视觉冲击力,将观众的目光聚焦于作品中央,无论是用于艺术作品还是商业广告,Distortion 都能让你的作品更加出众和令人难忘。

Copy Component

属性控制

Mode (Enum: Classic/Realistic)

扭曲效果的配置方式。Classic 模式能够使用 Sharpness 属性来添加额外的形变,Realitic 模式则模拟了真实的镜头效果,并能使用 Scale 来添加缩放。

Distortion (Number: -0.2-1 / -2-100)

控制媒体的扭曲程度,数值越大,媒体会有更强的形变并从更远的地方进入。当 Mode 为Realistic时,它的参数范围将拓展到 -2 至 100.

Sharpness (Number: 1-10)

额外的形变程度,越大的数值会让媒体的四角产生越明显的形变。仅在 Mode 为 Classic 时可用。

Scale (Number: 1-10)

画面的缩放效果,仅在 Mode 为 Realistic 时可用。

Blur (Number: 1-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

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

Distortion
Component
Media

Image

Video

Image

Image

Size

Fill

Mode

Classic

Realistic

Distortion
Scale
Blur
Animate

Appear

Transition

Spring

Variant 1

Variant 2

Variant 3

特性

随心使用你的图片或视频

使用滚动动画来触发效果

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

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

跟随颜色主题切换媒体

兼容 Framer 的过渡控制器

在任意进度停止动画

下一个

Variant 1

Variant 2

Variant 3

Video

by

Cottonbro

Variant 1

Variant 2

Variant 3

Video

by

Cottonbro

Reveals cool WebGL Effects Components for Framer.