modern-canvas 0.2.3 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -2
- package/dist/index.cjs +1000 -969
- package/dist/index.d.cts +91 -83
- package/dist/index.d.mts +91 -83
- package/dist/index.d.ts +91 -83
- package/dist/index.js +155 -155
- package/dist/index.mjs +1001 -970
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,6 +18,18 @@
|
|
|
18
18
|
</a>
|
|
19
19
|
</p>
|
|
20
20
|
|
|
21
|
+
## Features
|
|
22
|
+
|
|
23
|
+
- WebGL and WebGL2
|
|
24
|
+
|
|
25
|
+
- Animation
|
|
26
|
+
|
|
27
|
+
- Special effects
|
|
28
|
+
|
|
29
|
+
- Transition effects
|
|
30
|
+
|
|
31
|
+
- Describe element as you would a CSSStyle
|
|
32
|
+
|
|
21
33
|
## 📦 Install
|
|
22
34
|
|
|
23
35
|
```shell
|
|
@@ -84,9 +96,9 @@ loadFallbackFont().then(() => {
|
|
|
84
96
|
})
|
|
85
97
|
```
|
|
86
98
|
|
|
87
|
-
##
|
|
99
|
+
## Special effect
|
|
88
100
|
|
|
89
|
-
See
|
|
101
|
+
See all [preset special effects](./src/scene/effects)
|
|
90
102
|
|
|
91
103
|
```typescript
|
|
92
104
|
import { EmbossEffect, Image2D } from 'modern-canvas'
|
|
@@ -99,3 +111,38 @@ engine.root.addChild(
|
|
|
99
111
|
])
|
|
100
112
|
)
|
|
101
113
|
```
|
|
114
|
+
|
|
115
|
+
## Transition effect
|
|
116
|
+
|
|
117
|
+
See all [preset transitions](./src/scene/transitions)
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
import { Image2D, TiltShiftTransition } from 'modern-canvas'
|
|
121
|
+
|
|
122
|
+
engine.root.addChild(
|
|
123
|
+
new Image2D({
|
|
124
|
+
src: '/example.png',
|
|
125
|
+
}),
|
|
126
|
+
new TiltShiftTransition(),
|
|
127
|
+
new Image2D({
|
|
128
|
+
src: '/example.gif',
|
|
129
|
+
}),
|
|
130
|
+
)
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Use https://github.com/gl-transitions/gl-transitions with `vite`
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
import bounceGLSL from 'gl-transitions/transitions/Bounce.glsl?raw'
|
|
137
|
+
import { Image2D, Transition } from 'modern-canvas'
|
|
138
|
+
|
|
139
|
+
engine.root.addChild(
|
|
140
|
+
new Image2D({
|
|
141
|
+
src: '/example.png',
|
|
142
|
+
}),
|
|
143
|
+
new Transition({ glsl: bounceGLSL }),
|
|
144
|
+
new Image2D({
|
|
145
|
+
src: '/example.gif',
|
|
146
|
+
}),
|
|
147
|
+
)
|
|
148
|
+
```
|