Merge pull request #238 from Kalo0m/feat/translation-Ken-Burns

add right/left parameters - translations

Author: mifi

README.md

@@ -399,7 +399,7 @@ See [position.json5](examples/position.json5)
 
 | Parameter  | Description | Default | |
 |-|-|-|-|
-| `zoomDirection` | Zoom direction for Ken Burns effect: `in`, `out` or `null` to disable | | |
+| `zoomDirection` | Zoom direction for Ken Burns effect: `in`, `out`, `left`, `right` or `null` to disable | | |
 | `zoomAmount` | Zoom amount for Ken Burns effect | `0.1` | |
 
 ## Docker

index.d.ts

@@ -230,7 +230,7 @@ declare namespace Editly {
 		 * Zoom direction for Ken Burns effect.
 		 * Use `null` to disable.
 		 */
-		zoomDirection?: 'in' | 'out' | null;
+		zoomDirection?: 'in' | 'out' | 'left' | `right` | null;
 
 		/**
 		 * Zoom amount for Ken Burns effect.

sources/fabric/fabricFrameSources.js

@@ -14,11 +14,22 @@ const loadImage = async (pathOrUrl) => new Promise((resolve) => fabric.util.load
 
 function getZoomParams({ progress, zoomDirection, zoomAmount }) {
   let scaleFactor = 1;
+  if (zoomDirection === 'left' || zoomDirection === 'right') return 1.3;
   if (zoomDirection === 'in') scaleFactor = (1 + zoomAmount * progress);
   else if (zoomDirection === 'out') scaleFactor = (1 + zoomAmount * (1 - progress));
   return scaleFactor;
 }
 
+function getTranslationParams({ progress, zoomDirection, zoomAmount }) {
+  let translation = 0;
+  const range = zoomAmount * 1000;
+
+  if (zoomDirection === 'right') translation = (progress) * range - range / 2;
+  else if (zoomDirection === 'left') translation = (100 - progress * 100) * range - range / 2;
+
+  return translation;
+}
+
 export async function imageFrameSource({ verbose, params, width, height }) {
   const { path, zoomDirection = 'in', zoomAmount = 0.1, resizeMode = 'contain-blur' } = params;
 
@@ -46,10 +57,13 @@ export async function imageFrameSource({ verbose, params, width, height }) {
     const img = createImg();
 
     const scaleFactor = getZoomParams({ progress, zoomDirection, zoomAmount });
+    const translationParams = getTranslationParams({ progress, zoomDirection, zoomAmount });
 
     const ratioW = width / img.width;
     const ratioH = height / img.height;
 
+    img.left = width / 2 + translationParams;
+
     if (['contain', 'contain-blur'].includes(resizeMode)) {
       if (ratioW > ratioH) {
         img.scaleToHeight(height * scaleFactor);
@@ -230,6 +244,9 @@ export async function imageOverlayFrameSource({ params, width, height }) {
   async function onRender(progress, canvas) {
     const scaleFactor = getZoomParams({ progress, zoomDirection, zoomAmount });
 
+    const translationParams = getTranslationParams({ progress, zoomDirection, zoomAmount });
+    img.left = width / 2 + translationParams;
+
     if (relWidth != null) {
       img.scaleToWidth(relWidth * width * scaleFactor);
     } else if (relHeight != null) {
@@ -257,6 +274,8 @@ export async function titleFrameSource({ width, height, params }) {
 
     const scaleFactor = getZoomParams({ progress, zoomDirection, zoomAmount });
 
+    const translationParams = getTranslationParams({ progress, zoomDirection, zoomAmount });
+
     const textBox = new fabric.Textbox(text, {
       fill: textColor,
       fontFamily,
@@ -273,7 +292,7 @@ export async function titleFrameSource({ width, height, params }) {
     textImage.set({
       originX,
       originY,
-      left,
+      left: left + translationParams,
       top,
       scaleX: scaleFactor,
       scaleY: scaleFactor,