عرض مصدر ReactNative/layoutanimation

<noinclude>{{DISPLAYTITLE:الواجهة LayoutAnimation في React Native}}</noinclude> 
تحرِّك الواجهات لمواضعها الجديدة تلقائيًا عند تطبيق التخطيط التالي.

تعدّ الطّريقة المألوفة لاستخدام هذه الواجهة البرمجية هي استدعاؤها قبل تحديث خطّاف الحالة (state hook) في المكوّنات الوظيفيّة (functional components)، واستدعاء <code>setState</code> ضمن مكونات الصنف.

ويجب وضع الرّايات (flags) التّالية بواسطة <code>UIManager</code> لتعمل هذه الواجهة البرمجيّة على منصّة Android:<syntaxhighlight lang="javascript">
if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}
</syntaxhighlight>
__toc__
== مثال ==
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/layoutanimation تجربة حية]):<syntaxhighlight lang="javascript">
import React, { useState } from "react";
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
const App = () => {
  const [expanded, setExpanded] = useState(false);

  return (
    <View style={style.container}>
      <TouchableOpacity
        onPress={() => {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
          setExpanded(!expanded);
        }}
      >
        <Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
      </TouchableOpacity>
      {expanded && (
        <View style={style.tile}>
          <Text>I disappear sometimes!</Text>
        </View>
      )}
    </View>
  );
};

const style = StyleSheet.create({
  tile: {
    backgroundColor: "lightgrey",
    borderWidth: 0.5,
    borderColor: "#d6d7da"
  },
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  }
});

export default App;
</syntaxhighlight>

== التوابع ==

=== <code>‎configureNext()‎</code> ===
<syntaxhighlight lang="javascript">
static configureNext(config, onAnimationDidEnd?)
</syntaxhighlight>يجدوِل الحركة لتحدُث في التخطيط التّالي.

المعاملات:
{| class="wikitable"
!الاسم
!النوع
!مطلوب
!الوصف
|-
|<code>config</code>
|كائن (object)
|نعم
|انظر الوصف بالأسفل
|-
|<code>onAnimationDidEnd</code>
|دالة (function)
|لا
|تُستدعى عند انتهاء الحركة، مدعومة فقط على منصة IOS
|}
المعامل <code>config</code> هو كائن مع المفاتيح الموضّحة في الأسفل، يعيد التابع <code>()create</code> كائنًا موافقًا للكائن <code>config</code>، ويمكن تمرير جميع كائنات الضّبط المسبق <code>Presets</code>، مثل: الكائن <code>config</code>.

* <code>duration</code>: المدّة الزّمنيّة بالميلي ثانية.
* <code>create</code>: مكوّن ضبط <code>config</code> اختياريٌّ للتحريك في الواجهات الجديدة.
* <code>update</code>: مكوّن ضبط (config) اختياريٌّ للواجهات المتحرّكة المحدَّثة.
* <code>delete</code>: مكوّن ضبط (config) اختياريٌّ للواجهات المتحرّكة المحذوفة.

يتضمن مكوّن الضبط (config) الذي يمرّر إلى <code>create</code>، و<code>update</code>، و<code>delete</code> المفاتيح التالية:

* <code>type</code>: نوع الحركة <code>animation type</code> التي ستستخدم.
* <code>property</code>: خاصيّة التّخطيط <code>layout property</code> (اختياريٌّ، لكنّه مطلوبٌ في <code>create</code>، و<code>delete</code>).
* <code>springDamping</code>: (عددٌ، اختياريٌّ، ويستخدم فقط مع <code>type: Type.spring</code>).
* <code>initialVelocity</code>: (عددٌ، اختياريٌّ).
* <code>delay</code>: (عددٌ، اختياريٌّ).
* <code>duration</code>: (عددٌ، اختياريٌّ).

=== <code>‎create()‎</code> ===
<syntaxhighlight lang="javascript">
static create(duration, type, creationProp)
</syntaxhighlight>هو تابعٌ مساعدٌ يُنشئ كائنًا يحوي الحقول (<code>create</code>, <code>update</code>, <code>delete</code>)، ليمرَّر للتابع ‏<code>()‎configureNext</code>، حيث المُعامل <code>type</code> هو نوع الحركة <code>animation type</code>، والمُعامل <code>creationProp</code> هو خاصيّة التخطيط <code>layout property</code>.

إليك مثال الاستخدام:
* [https://snack.expo.dev/@hsoubwiki/layoutanimation-function-component مثال لمكوِّن دالّة (Function Component)]
<syntaxhighlight lang="javascript">
import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [boxPosition, setBoxPosition] = useState("left");

  const toggleBox = () => {
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        500,
        LayoutAnimation.Types.spring,
        LayoutAnimation.Properties.scaleXY
      )
    );
    setBoxPosition(boxPosition === "left" ? "right" : "left");
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Toggle Layout" onPress={toggleBox} />
      </View>
      <View
        style={[styles.box, boxPosition === "left" ? null : styles.moveRight]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end",
    height: 200,
    width: 200
  },
  buttonContainer: {
    alignSelf: "center"
  }
});

export default App;
</syntaxhighlight>

* [https://snack.expo.dev/@hsoubwiki/layoutanimation-class-component مثال لمكوِّن صنف (Class Component)]
<syntaxhighlight lang="javascript">
import React, { Component } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

class App extends Component {
  state = {
    boxPosition: "left"
  };

  toggleBox = () => {
    LayoutAnimation.configureNext(
      LayoutAnimation.create(
        500,
        LayoutAnimation.Types.spring,
        LayoutAnimation.Properties.scaleXY
      )
    );
    this.setState({
      boxPosition: this.state.boxPosition === "left" ? "right" : "left"
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button title="Toggle Layout" onPress={this.toggleBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.boxPosition === "left" ? null : styles.moveRight
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end",
    height: 200,
    width: 200
  },
  buttonContainer: {
    alignSelf: "center"
  }
});

export default App;
</syntaxhighlight>

== الخاصيات ==

=== <code>Types</code> ===
تستخدم أنواع الحركات من القيم المتعدّدة (enumeration) في التّابع <code>()‎create</code>، أو في المعامل <code>config</code> الذي يمرّر إلى <code>create</code>، أو <code>update</code>، أو <code>delete</code> من أجل التّابع <code>()configureNext</code>، (يمكن أن يستخدم، مثلًا:  <code>LayoutAnimation.Types.easeIn</code>)، وهذه الأنواع هي:

* <code>spring</code>
* <code>linear</code>
* <code>easeInEaseOut</code>
* <code>easeIn</code>
* <code>easeOut</code>
* <code>keyboard</code>

=== <code>Properties</code> ===
خاصيات التّخطيط من القيم المتعدّدة (enumeration) المستخدمة في الحركات، وتستخدم في التّابع <code>()create</code>، أو في المعامل (config) الذي يمرّر إلى <code>create</code>، أو <code>update</code>، أو <code>delete</code> من أجل التّابع <code>()configureNext</code>، (يمكن أن يستخدم مثلًا: <code>LayoutAnimation.Properties.opacity</code>)، وهذه الخاصيات هي:

* <code>opacity</code>
* <code>scaleX</code>
* <code>scaleY</code>
* <code>scaleXY</code>

=== <code>Presets</code> ===
وهي مجموعة من معاملات (أو مكونات ضبط config) حركةٍ معرّفةٍ مسبقًا، تمرّر للتّابع ‪.<code>configureNext()</code>
{| class="wikitable"
!كائن الضبط المسبق
!القيمة
|-
|easeInEaseOut
|<syntaxhighlight lang="js">
create(300, 'easeInEaseOut', 'opacity')‎
</syntaxhighlight>
|-
|linear
|<syntaxhighlight lang="js">
create(500, 'linear', 'opacity')‎
</syntaxhighlight>
|-
|spring
|<syntaxhighlight lang="js">
‎{ duration: 700, create: { type: 'linear', property: 'opacity' }, update: { type: 'spring', springDamping: 0.4 }, delete: { type: 'linear', property: 'opacity' } }‎
</syntaxhighlight>
|}

* <code>‫‏()‎easeInEaseOut</code>:  يستدعي التّابع <code>()configureNext</code> مع <code>Presets.easeInEaseOut</code>.
* <code>()liner</code>: يستدعي التّابع <code>()configureNext</code> مع <code>Presets.liner</code>.
* <code>()spring</code>: يستدعي التّابع <code>()configureNext</code> مع <code>Presets.spring</code>.

إليك مثال الاستخدام التالي:
* [https://snack.expo.dev/@hsoubwiki/layoutanimation-presets-function-component مثال لمكوِّن دالّة (Function Component)]
<syntaxhighlight lang="javascript">
import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [firstBoxPosition, setFirstBoxPosition] = useState("left");
  const [secondBoxPosition, setSecondBoxPosition] = useState("left");
  const [thirdBoxPosition, setThirdBoxPosition] = useState("left");

  const toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setFirstBoxPosition(firstBoxPosition === "left" ? "right" : "left");
  };

  const toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    setSecondBoxPosition(secondBoxPosition === "left" ? "right" : "left");
  };

  const toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setThirdBoxPosition(thirdBoxPosition === "left" ? "right" : "left");
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
      </View>
      <View
        style={[
          styles.box,
          firstBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Linear" onPress={toggleSecondBox} />
      </View>
      <View
        style={[
          styles.box,
          secondBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleThirdBox} />
      </View>
      <View
        style={[
          styles.box,
          thirdBoxPosition === "left" ? null : styles.moveRight
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end"
  },
  buttonContainer: {
    alignSelf: "center"
  }
});

export default App;
</syntaxhighlight>

* [https://snack.expo.dev/@hsoubwiki/layoutanimation-presets-class-component مثال لمكوِّن صنف (Class Component)]
<syntaxhighlight lang="javascript">
import React, { Component } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button
} from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

class App extends Component {
  state = {
    firstBoxPosition: "left",
    secondBoxPosition: "left",
    thirdBoxPosition: "left"
  };

  toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    this.setState({
      firstBoxPosition:
        this.state.firstBoxPosition === "left" ? "right" : "left"
    });
  };

  toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    this.setState({
      secondBoxPosition:
        this.state.secondBoxPosition === "left" ? "right" : "left"
    });
  };

  toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({
      thirdBoxPosition:
        this.state.thirdBoxPosition === "left" ? "right" : "left"
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button title="EaseInEaseOut" onPress={this.toggleFirstBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.firstBoxPosition === "left" ? null : styles.moveRight
          ]}
        />
        <View style={styles.buttonContainer}>
          <Button title="Linear" onPress={this.toggleSecondBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.secondBoxPosition === "left" ? null : styles.moveRight
          ]}
        />
        <View style={styles.buttonContainer}>
          <Button title="Spring" onPress={this.toggleThirdBox} />
        </View>
        <View
          style={[
            styles.box,
            this.state.thirdBoxPosition === "left" ? null : styles.moveRight
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end"
  },
  buttonContainer: {
    alignSelf: "center"
  }
});

export default App;
</syntaxhighlight>

== مصادر ==

* [https://facebook.github.io/react-native/docs/layoutanimation صفحة LayoutAnimation في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]