YUI Class Anim : สอน method และ property ของ Class Anim, เรียน method และ property ของ Class Anim
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • Yahoo.util.Anim ( element, attributes, duration, method ); ใช้สร้าง object anim
    attributes ใช้กำหนดค่า หรือคืนค่า attributes ของ object anim
    currentFrame ใช้คืนค่า ว่าปัจจุบัน animation นั้นเล่นอยู่ frame ที่เท่าไร ( ใช้ร่วมกับ Yahoo.util.AnimMgr )
    duration ใช้กำหนดค่า หรือคืนค่า ระยะเวลาที่เกิดการกระทำของ animation
    method ใช้กำหนดค่า หรือคืนค่า function ของการกระทำของ animation
    totalFrames ใช้กำหนดค่า หรือคืนค่า จำนวนของ frame ทั้งหมด ของ animation
    useSeconds ใช้กำหนดค่า หรือคืนค่า ว่าเวลาของ animation เป็นหน่วย seconds ใช่หรือไม่ ( default = true )
    animate() ใช้กำหนดให้ animation เริ่มทำงาน
    getAttribute() ใช้คืนค่า ค่าข้อมูลปัจจุบัน ของ attribute ที่กำหนด
    getDefaultUnit() ใช้คืนค่า ค่าข้อมูลเริ่มต้น ของ attribute ที่กำหนด
    getEl() ใช้คืนค่า element ของ object anim
    getStartTime() ใช้คืนค่า เวลาที่เริ่มเล่น animation
    init ( element, attributes, duration, method ) ใช้กำหนดค่าเริ่มต้นต่างๆให้กับ object anim ( เป็น constructor ของ Yahoo.util.Anim )
    isAnimated() ใช้ตรวจสอบว่า anim นี้ถูกเล่นอยู่หรือไม่
    setAttribute() ใช้กำหนดค่าให้กับ attribute
    stop() ใช้หยุดการทำงานของ animation ซึ่งโดยปกติ animation จะถูกสั่งให้หยุดโดย Yahoo.util.AnimMgr เมื่อมันเล่นเสร็จ
    onComplete() เป็นการกำหนดให้ function ทำงาน เมื่อ animation เล่นเสร็จสมบูรณ์
    onStart() เป็นการกำหนดให้ function ทำงาน เมื่อ animation เริ่มเล่น
    onTween() เป็นการกำหนดให้ function ทำงาน เมื่อ animation กำลังเล่นอยู่
  • method :
    Yahoo.util.Anim ( element, attributes, duration, method );

    return type :
    Anim

    content :
    ใช้สร้าง object anim

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 

    comment :
    ตัวแปร element คือ id ของ element หรือ dom element ที่ต้องการให้เกิดการกระทำนี้
    ตัวแปร attributes คือ คำสั่งของ css ที่กำหนด attribute ได้แก่ to, by, from, units
    ตัวแปร duration คือ กำหนดระยะเวลาที่เกิดการกระทำนี้ ( default = 1 )
    ตัวแปร method คือ ฟังก์ชันที่จะทำงานในขณะเกิดการกระทำนี้ ( default = Yahoo.util.Easing.easeNone )

  • property :
    attributes

    return type :
    void, object

    content :
    ใช้กำหนดค่า หรือคืนค่า attributes ของ object anim

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    anim.attributes = { width: { from: 0, to: 300 },  height: { from: 0, to: 300 } };

  • property :
    currentFrame

    return type :
    number

    content :
    ใช้คืนค่า ว่าปัจจุบัน animation นั้นเล่นอยู่ frame ที่เท่าไร
    ( ใช้ร่วมกับ Yahoo.util.AnimMgr )

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var current_frame = anim.currentFrame;

  • property :
    duration

    return type :
    void, number

    content :
    ใช้กำหนดค่า หรือคืนค่า ระยะเวลาที่เกิดการกระทำของ animation

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var duration = anim.duration;

  • property :
    method

    return type :
    void, function

    content :
    ใช้กำหนดค่า หรือคืนค่า function ของการกระทำของ animation

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var func = anim.method;

  • property :
    totalFrames

    return type :
    void, number

    content :
    ใช้กำหนดค่า หรือคืนค่า จำนวนของ frame ทั้งหมด ของ animation

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var total_frame = anim.totalFrames;

  • property :
    useSeconds

    return type :
    void, boolean

    content :
    ใช้กำหนดค่า หรือคืนค่า ว่าเวลาของ animation เป็นหน่วย 
    seconds ใช่หรือไม่ ( default = true )

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    if ( ! anim.useSeconds )
    {
        anim.useSeconds = true;
    }

  • method :
    animate ( )

    return type :
    void

    content :
    ใช้กำหนดให้ animation เริ่มทำงาน

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    anim.animate ();

  • method :
    getAttribute ( attribute );

    return type :
    number array

    content :
    ใช้คืนค่า ค่าข้อมูลปัจจุบัน ของ attribute ที่กำหนด

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    anim.animate ();
    var width = anim.getAttribute ( "width" );

  • method :
    getDefaultUnit ( attribute );

    return type :
    number array

    content :
    ใช้คืนค่า ค่าข้อมูลเริ่มต้น ของ attribute ที่กำหนด

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var width = anim.getDefaultUnit ( "width" );

  • method :
    getEl ()

    return type :
    HTMLElement

    content :
    ใช้คืนค่า element ของ object anim

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    var element = anim.getEl ();

  • method :
    getStartTime ();

    return type :
    Date

    content :
    ใช้คืนค่า เวลาที่เริ่มเล่น animation

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes );
    anim.animate ();
    var datetime = anim.getStartTime ();

  • method :
    init ( element, attributes, duration, method );

    return type :
    void

    content :
    ใช้กำหนดค่าเริ่มต้นต่างๆให้กับ object anim ( เป็น constructor ของ Yahoo.util.Anim )

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.init ( "bamboo", { width: { from: 0, to: 300 },  height: { from: 0, to: 300 } } );

    comment :
    ตัวแปร element คือ id ของ element ที่ต้องการให้เกิดการกระทำนี้
    ตัวแปร attributes คือ คำสั่งของ css ที่กำหนด attribute ได้แก่ to, by, from, units
    ตัวแปร duration คือ กำหนดระยะเวลาที่เกิดการกระทำนี้ ( default = 1 )
    ตัวแปร method คือ ฟังก์ชันที่จะทำงานในขณะเกิดการกระทำนี้ ( default = Yahoo.util.Easing.easeNone )

  • method :
    isAnimated ()

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า anim นี้ถูกเล่นอยู่หรือไม่

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.animate ();
    if ( anim.isAnimated () )
    {
         anim.stop ();
    }

  • method :
    setAttribute ( attribute, value, unit )

    return type :
    void

    content :
    ใช้กำหนดค่าให้กับ attribute

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.setAttribute ( width, { to: 100 }, "px" );

  • method :
    stop ()

    return type :
    void

    content :
    ใช้หยุดการทำงานของ animation
    ซึ่งโดยปกติ animation จะถูกสั่งให้หยุดโดย Yahoo.util.AnimMgr เมื่อมันเล่นเสร็จ

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.animate ();
    if ( anim.isAnimated () )
    {
         anim.stop ();
    }

  • method :
    onComplete ()

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ animation เล่นเสร็จสมบูรณ์

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.onComplete.subscribe ( function () { alert ( "animation complete" ); } );

  • method :
    onStart ()

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ animation เริ่มเล่น

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.onStart.subscribe ( function () { alert ( "animation start" ); } );

  • method :
    onTween ()

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ animation กำลังเล่นอยู่

    example :
    var attributes = { width: { to: 0 } }; 
    var anim = new YAHOO.util.Anim ( "bamboo", attributes ); 
    anim.onTween.subscribe ( function () { alert ( "animation tween" ); } );

 
Share This Chapter Login with Facebook