@omnimedia/omnitool 1.1.0-83 → 1.1.0-85

package/README.md

@@ -173,14 +173,18 @@ const timeline = omni.timeline(o => {
 Built-in spatial animations:
 
 ```ts
+const animOut = {
+	duration: 500,
+	offset: item.duration - 500,
+}
 const slideIn = o.animatedSpatial(o.anim.presets.slideIn())
-const slideOut = o.animatedSpatial(o.anim.presets.slideOut({duration: 500}))
+const slideOut = o.animatedSpatial(o.anim.presets.slideOut(animOut))
 const spinIn = o.animatedSpatial(o.anim.presets.spinIn())
-const spinOut = o.animatedSpatial(o.anim.presets.spinOut())
+const spinOut = o.animatedSpatial(o.anim.presets.spinOut(animOut))
 const zoomIn = o.animatedSpatial(o.anim.presets.zoomIn())
-const zoomOut = o.animatedSpatial(o.anim.presets.zoomOut())
+const zoomOut = o.animatedSpatial(o.anim.presets.zoomOut(animOut))
 const bounceIn = o.animatedSpatial(o.anim.presets.bounceIn())
-const bounceOut = o.animatedSpatial(o.anim.presets.bounceOut())
+const bounceOut = o.animatedSpatial(o.anim.presets.bounceOut(animOut))
 ```
 
 Built-in scalar animations:
@@ -229,7 +233,7 @@ const timeline = omni.timeline(o => {
 		duration: 2000,
 		styles: {fill: "white", fontSize: 36},
 	})
-	o.set(title.id, {animationId: fadeIn.id})
+	o.set(title.id, {animationIds: [fadeIn.id]})
 
 	return o.stack(
 		o.video(clip, {duration: 4000}),
@@ -268,6 +272,14 @@ Animatable properties describe what can be keyframed, such as `transform` and `o
 Animation presets describe built-in recipes, such as `slideIn` and `fadeIn`, that create animation data.
 Use `animationPresets` to list available recipes, and `o.anim.presets` to create animation data from them.
 
+Preset options:
+- `duration` sets the animation duration, defaulting to `700`.
+- `offset` shifts generated keyframes in item-local time.
+  Useful for out animations: `item.duration - 500` starts `slideOut` 500ms before the item ends.
+- `from` sets the start value, like opacity `0` or position `[-400, 0]`.
+- `to` sets the end value, like opacity `1` or position `[0, 0]`.
+- `terp` sets interpolation, defaulting to the preset's `terp`.
+
 Utils:
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@omnimedia/omnitool",
-	"version": "1.1.0-83",
+	"version": "1.1.0-85",
 	"description": "open source video processing tools",
 	"license": "MIT",
 	"author": "Przemysław Gałęzki",

package/s/demo/routines/timeline-setup.ts

@@ -32,7 +32,7 @@ export async function TimelineSchemaTest(driver: Driver, file: File) {
 		)
 
 		const video = o.video(videoA, {duration: 3000, start: 1000})
-		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationId: fade.id})
+		o.set<Item.Text>(text.id, {styleId: style.id, spatialId: textSpatial.id, animationIds: [fade.id]})
 		o.set<Item.Video>(video.id, {spatialId: videoSpatial.id})
 
 		return o.sequence(

package/s/timeline/parts/animations/make.ts

@@ -10,22 +10,26 @@ export function makeAnimationPresets(
 ): AnimationPresetActions {
 	const entries = Object.entries(animationPresets).map(([name, preset]) => {
 		const action = preset.type === "motion"
-			? (options?: MotionAnimationOptions): Anim<TrackTransform> =>
-				transform(options?.terp ?? preset.defaults.terp, [
-					[0, transformFrom({
+			? (options?: MotionAnimationOptions): Anim<TrackTransform> => {
+				const offset = options?.offset ?? 0
+				return transform(options?.terp ?? preset.defaults.terp, [
+					[offset, transformFrom({
 						...preset.transform.from,
 						...(options?.from === undefined ? {} : {position: options.from}),
 					})],
-					[options?.duration ?? preset.defaults.duration, transformFrom({
+					[offset + (options?.duration ?? preset.defaults.duration), transformFrom({
 						...preset.transform.to,
 						...(options?.to === undefined ? {} : {position: options.to}),
 					})],
 				])
-			: (options?: ScalarAnimationOptions): Anim<Keyframes> =>
-				scalar(options?.terp ?? preset.defaults.terp, [
-					[0, options?.from ?? preset.defaults.from],
-					[options?.duration ?? preset.defaults.duration, options?.to ?? preset.defaults.to],
+			}
+			: (options?: ScalarAnimationOptions): Anim<Keyframes> => {
+				const offset = options?.offset ?? 0
+				return scalar(options?.terp ?? preset.defaults.terp, [
+					[offset, options?.from ?? preset.defaults.from],
+					[offset + (options?.duration ?? preset.defaults.duration), options?.to ?? preset.defaults.to],
 				])
+			}
 
 		return [name, action]
 	})

package/s/timeline/parts/animations/types.ts

@@ -24,7 +24,7 @@ export type AnimationDefinition = {
 export type MotionAnimationPresetDefinition = {
 	type: "motion"
 	label: string
-	defaults: Required<MotionAnimationOptions>
+	defaults: Required<Omit<MotionAnimationOptions, "offset">>
 	transform: {
 		from: TransformOptions
 		to: TransformOptions
@@ -34,7 +34,7 @@ export type MotionAnimationPresetDefinition = {
 export type ScalarAnimationPresetDefinition = {
 	type: "scalar"
 	label: string
-	defaults: Required<ScalarAnimationOptions>
+	defaults: Required<Omit<ScalarAnimationOptions, "offset">>
 }
 
 export type AnimationPresetDefinition =
@@ -59,6 +59,7 @@ export type AnimationPresetActions = {
 
 export type AnimationPresetOptions<Value> = {
 	duration?: number
+	offset?: number
 	from?: Value
 	to?: Value
 	terp?: Interpolation

package/s/timeline/parts/item.ts

@@ -94,7 +94,7 @@ export namespace Item {
 		start: number
 		duration: number
 		spatialId?: Id
-		animationId?: Id
+		animationIds?: Id[]
 		filterIds?: Id[]
 	}
 
@@ -113,7 +113,7 @@ export namespace Item {
 		content: string
 		duration: number
 		spatialId?: Id
-		animationId?: Id
+		animationIds?: Id[]
 		styleId?: Id
 		filterIds?: Id[]
 	}

package/s/timeline/renderers/parts/handy.ts

@@ -1,4 +1,5 @@
 
+import {Keyframes} from '../../types.js'
 import {ms, Ms} from '../../../units/ms.js'
 import {Id, TimelineFile} from '../../parts/basics.js'
 import { SampleContext } from './samplers/visual/parts/types.js'
@@ -366,12 +367,30 @@ export function computeOpacity(
 	item: Item.Any,
 	time: Ms,
 ) {
-	if (!("animationId" in item) || item.animationId === undefined)
+	if (!("animationIds" in item) || item.animationIds === undefined)
 		return 1
 
-	const animation = ctx.items.get(item.animationId) as Item.Animation | undefined
-	return animation?.enabled && animation.anims.opacity
-		? resolveScalarAnimation(time, animation.anims.opacity)
-		: 1
+	let opacity = 1
+	for (const id of item.animationIds) {
+		const animation = ctx.items.get(id) as Item.Animation | undefined
+		const anim = animation?.anims.opacity
+		if (animation?.enabled && anim && keyframesActiveAt(anim.track, time))
+			opacity = resolveScalarAnimation(time, anim)
+	}
+	return opacity
+}
+
+function keyframesActiveAt(keys: Keyframes, time: Ms) {
+	if (keys.length === 0)
+		return false
+
+	let start = keys[0][0]
+	let end = keys[0][0]
+	for (const [keyTime] of keys) {
+		start = Math.min(start, keyTime)
+		end = Math.max(end, keyTime)
+	}
+
+	return time >= start && time <= end
 }
 

package/s/timeline/sugar/o.ts

@@ -177,7 +177,7 @@ export class O {
 			const animation = make(terp, track)
 			const next = {
 				...item,
-				animationId: animation.id
+				animationIds: [...(item.animationIds ?? []), animation.id]
 			}
 			this.set<T>(item.id, next as Partial<T>)
 			return next