Saturday, November 2, 2013

Create simple animations in apps using the animation library in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Create-4ea581ba
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "SimpleSPAnimationDemo"
SimpleSPAnimationDemo -> Content -> Add existing item -> add 'Photo.png'
SimpleSPAnimationDemo -> Pages -> Default.aspx
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    <div id="toolbar">
        <input type="button" id="cmdHidePhoto" value="Hide Photo" />
        <input type="button" id="cmdShowPhoto" value="Show Photo" />
        <input type="button" id="cmdEnlargePhoto" value="Enlarge Photo" />
        <input type="button" id="cmdChangeOpacity" value="Change Opacity" />
    </div>
    <div>
        <img id="photo1" src="../Content/photo.jpg" />
    </div>

</asp:Content>
SimpleSPAnimationDemo -> Scripts -> App.js
'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    $("#cmdHidePhoto").click(onHidePhoto);
    $("#cmdShowPhoto").click(onShowPhoto);
    $("#cmdEnlargePhoto").click(onEnlargePhoto);
    $("#cmdChangeOpacity").click(onChangeOpacity);
    getUserName();
});

function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

function onHidePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeOut(photo1);
}

function onShowPhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeIn(photo1);
}

function onEnlargePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.Resize(photo1, 500, 500);
}

function onChangeOpacity() {

    var photo1 = document.getElementById("photo1");

    var state = new SPAnimation.State();
    state.SetAttribute(SPAnimation.Attribute.Opacity, 0.2);
    var animation = new SPAnimation.Object(SPAnimation.ID.Basic_Opacity, 500, photo1, state);

    animation.RunAnimation();

}

Thank You

1 comment:

Featured Post

Building Secure APIs with FastAPI and Azure AD Authentication

Building Secure APIs with FastAPI and Azure AD Authentication Published on September 2, 2025 In today's world of microservices and API-f...

Popular posts